米老鼠时钟手表走动效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：米老鼠时钟手表走动效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background: #000;
}

#watch {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 450px;
  height: 450px;
  background: radial-gradient(grey, black 70%);
  color: #fff;
  font: bold 30px Arial, sans-serif;
}

.digit {
  position: absolute;
  width: 104%;
  height: 104%;
  margin: -2%;
  text-align: center;
}
.digit span {
  display: block;
}

.digit:nth-child(1) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.digit:nth-child(1) span {
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}

.digit:nth-child(2) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
.digit:nth-child(2) span {
  -webkit-transform: rotate(-60deg);
          transform: rotate(-60deg);
}

.digit:nth-child(3) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.digit:nth-child(3) span {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.digit:nth-child(4) {
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
}
.digit:nth-child(4) span {
  -webkit-transform: rotate(-120deg);
          transform: rotate(-120deg);
}

.digit:nth-child(5) {
  -webkit-transform: rotate(150deg);
          transform: rotate(150deg);
}
.digit:nth-child(5) span {
  -webkit-transform: rotate(-150deg);
          transform: rotate(-150deg);
}

.digit:nth-child(6) {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.digit:nth-child(6) span {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.digit:nth-child(7) {
  -webkit-transform: rotate(210deg);
          transform: rotate(210deg);
}
.digit:nth-child(7) span {
  -webkit-transform: rotate(-210deg);
          transform: rotate(-210deg);
}

.digit:nth-child(8) {
  -webkit-transform: rotate(240deg);
          transform: rotate(240deg);
}
.digit:nth-child(8) span {
  -webkit-transform: rotate(-240deg);
          transform: rotate(-240deg);
}

.digit:nth-child(9) {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
.digit:nth-child(9) span {
  -webkit-transform: rotate(-270deg);
          transform: rotate(-270deg);
}

.digit:nth-child(10) {
  -webkit-transform: rotate(300deg);
          transform: rotate(300deg);
}
.digit:nth-child(10) span {
  -webkit-transform: rotate(-300deg);
          transform: rotate(-300deg);
}

.digit:nth-child(11) {
  -webkit-transform: rotate(330deg);
          transform: rotate(330deg);
}
.digit:nth-child(11) span {
  -webkit-transform: rotate(-330deg);
          transform: rotate(-330deg);
}

.digit:nth-child(12) {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
.digit:nth-child(12) span {
  -webkit-transform: rotate(-360deg);
          transform: rotate(-360deg);
}

#mickey,
#hours,
#minutes {
  width: 100%;
  height: 100%;
  position: absolute;
  background: no-repeat center center;
  background-size: contain;
}

#mickey {
  background-size: 70%;
  background-position: 45% 85%;
  z-index: 50;
}

#hours,
#minutes,
#minutes:after {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat top center;
  background-size: 90px;
  background-position: center 5%;
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
}

#hours {
  z-index: 10;
}

#minutes {
  z-index: 100;
}

#minutes:after {
  content: '';
  display: block;
  -webkit-animation: seconds infinite 1s;
          animation: seconds infinite 1s;
}

@-webkit-keyframes seconds {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes seconds {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/* Sprites */
#mickey {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22396%22%20height%3D%22497%22%20viewBox%3D%22-6.905%20-5.582%20396%20497%22%20overflow%3D%22visible%22%20enable-background%3D%22new%20-6.905%20-5.582%20396%20497%22%3E%3Cellipse%20cx%3D%22160.677%22%20cy%3D%22123.803%22%20rx%3D%2280.751%22%20ry%3D%2275.888%22%2F%3E%3Cellipse%20cx%3D%22245.615%22%20cy%3D%22109.762%22%20rx%3D%2225.293%22%20ry%3D%2237.927%22%2F%3E%3Cpath%20d%3D%22M137.787%20161.41c29.368%205.696%2056.57%2063.198%2063.512%2067.647%209.96%207.476%2014.41%2018.688%2013.52%2033.817-.72%2011.925-4.45%2024.205-11.22%2037.023-.54.89.18%202.668%201.78%204.98%201.24%201.96%202.49%203.738%203.91%204.984-18.16%2017.63-38.63%2032.4-61.23%2044.5-22.07%2011.57-40.94%2017.98-56.6%2019.05-17.8%201.25-32.4-.71-43.97-6.23-13-6.23-20.65-16.19-22.96-29.9.18%2011.93%205.69%2021.54%2016.37%2028.66%2012.1%208.19%2029.01%2011.57%2050.72%2010.32%2016.19-1.42%2033.82-6.94%2052.86-16.55%2013.17-6.76%2032.04-18.33%2056.42-34.88l-18.69%2030.26c-5.52%201.07-10.68%203.2-15.31%206.58-4.81%203.21-7.48%206.41-8.19%209.61-2.85%201.96-8.37%204.28-16.38%207.12l-24.21%208.01c-22.07%208.01-37.2%2017.45-45.57%2028.48-9.08%2012.1-10.32%2023.85-3.38%2035.6%205.34%209.61%2014.95%2017.62%2028.48%2024.56%209.97%204.98%2021.36%208.01%2033.99%208.72%2012.46.89%2024.74-.35%2036.844-3.73%2012.46-3.56%2023.316-8.9%2032.393-16.37%209.97-7.83%2016.91-17.26%2021-28.3%2018.15%205.16%2036.31%207.83%2054.29%208.55%2016.91.35%2032.75-1.07%2047.52-4.63%2014.24-3.38%2026.34-8.54%2036.13-15.13%209.97-6.76%2016.73-14.6%2020.29-23.67%205.692-14.42%202.85-27.41-8.54-38.63-4.45-4.09-9.61-7.65-15.66-10.68-5.17-2.67-9.97-4.27-14.42-5.16-14.77-2.67-33.82%202.32-57.31%2015.31-1.25-1.6-3.39-3.2-6.06-4.45-2.495-1.42-4.98-2.31-7.3-2.67%205.34-12.99%2012.63-25.8%2021.53-38.44%204.986-.71%2010.68-3.2%2017.27-7.12%20.........完整代码请登录后点击上方下载按钮下载查看