米老鼠时钟手表走动效果-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%206.586-4.09%2011.57-8.19%2014.77-12.64-4.63-10.32-7.83-22.6-9.61-36.67%204.27-20.46.355-38.26-11.925-53.04-10.504-12.81-25.81-22.07-45.57-27.94-13.52-5.53-18.51-7.29%207.02-42.64m5.23-40.3l-6.35-12.47c1.96-3.38%203.026-7.48%203.383-12.28.18-4.45-.355-8.9-1.6-13.17-1.424-4.27-3.56-7.83-6.407-10.5-3.026-2.84-6.586-4.27-10.856-4.45-9.79-.17-15.485%203.92-17.266%2012.46-1.42%206.41-.18%2014.6%203.03%2024.39-2.67%201.07-4.45%202.14-5.34%202.85-4.45-8.19-10.68-14.95-18.69-20.29-7.66-5.16-16.2-8.72-25.99-10.5-9.62-1.96-19.05-2.14-29.02-.71-10.15%201.61-19.58%204.81-28.3%209.79%205.16-11.74%205.87-22.78%201.96-33.1-3.39-9.43-9.79-16.55-19.05-21.71C99.67.53%2089.88-1.08%2079.38.7%2067.81%202.657%2058.02%208.354%2049.834%2018.143c-8.722%2010.145-13.883%2021.18-15.485%2032.75-1.61%2010.856%200%2020.468%204.8%2029.19%204.62%208.72%2011.39%2014.594%2020.47%2017.976%209.61%203.38%2020.29%203.02%2031.68-1.25-2.32%205.34-4.1%2011.03-5.16%2017.26-1.43%207.12-1.6%2013.7-1.07%2019.75M262%2085.94c6.584%208.01%208.9%2017.8%206.94%2029.19-1.958%2012.46-8.72%2024.21-19.757%2035.248-5.874%205.698-12.28%2010.148-19.936%2013.53-7.297%203.383-14.772%205.34-22.427%205.874-7.654.712-14.95-.178-21.537-2.313-7.12-2.49-12.81-6.23-17.26-11.39%202.313-1.25%206.407-2.67%2012.103-4.45-5.873-1.25-11.746.35-17.8%204.63-5.693%204.09-8.363%208.36-8.007%2012.99l3.91-5.16c1.6-1.96%203.2-3.38%204.81-4.63%203.02%202.31%206.05%205.87%209.43%2010.68l8.36%2012.81c3.38%204.8%206.41%208.36%209.08%2010.68%203.73%203.02%207.65%204.45%2011.57%204.45%208.36%200%2015.66-4.28%2022.07-13%201.95-3.03%204.27-6.59%206.22-10.68l4.09-8.72c5.52-2.5%209.79-5.34%2012.82-8.01-.36%202.31-1.6%205.16-3.38%208.54l-3.56%205.51-1.78%202.13.89-2.85%201.06-2.67c-.53%200-1.96%201.78-3.92%205.52l-7.3%2011.75c-7.83%2011.39-15.31%2017.26-22.78%2017.62-7.48.53-14.24-1.43-20.11-5.34-2.5-1.78-7.12-6.05-14.06-12.99-.18.89.89%203.02%203.56%206.58-18.69-4.45-34.18-8.55-46.28-12.28-2.32-3.56-2.85-7.84-2.14-13%20.89-5.17%203.2-10.15%206.76-14.95%204.09-5.34%209.25-9.79%2015.66-13%207.12-3.92%2015.31-6.05%2024.21-6.59-4.45-2.31-10.15-5.87-16.56-10.86-7.12-5.34-13.53-11.04-19.23-16.73-14.77-15.29-19.75-26.5-14.77-33.8%205.16-8.01%2014.24-12.64%2027.23-13.888%2012.1-1.24%2023.14.36%2032.93%204.987l-3.38-3.92c-1.78-1.96-2.85-3.2-3.39-4.27%208.01.18%2016.55%202.67%2025.63%207.47%2010.32%205.34%2018.86%2012.82%2025.09%2022.25l-2.49%202.32c-3.02-6.58-7.48-11.92-13.53-16.19-5.69-4.09-9.43-5.16-11.39-3.56-1.42%201.425-.71%204.27%202.14%208.545%201.43%202.49%204.63%206.41%209.44%2012.1%201.78%203.21%204.45%205.88%207.653%207.836-1.96%205.34-2.85%209.078-2.67%2011.036%202.84-6.588%205.34-11.216%207.47-14.24%203.023-4.09%206.584-6.94%2010.68-8.9.89%203.03%202.49%205.52%204.625%207.652%202.14%201.96%204.452%203.2%207.12%203.74%206.053%201.24%2011.393-1.25%2015.843-7.3zm-38.268.18l-2.32%203.21c-2.49-3.56-4.804-5.514-7.12-6.05-1.244-.18-2.134%200-2.67.536l-7.65-9.61c-2.67-3.92-3.737-6.41-3.027-7.3l3.206.18%206.05%203.38c5.52%204.092%209.97%209.253%2013.53%2015.66zm-24.03%2093.98c3.38-1.42%207.12-1.953%2010.854-1.6%204.806.536%208.366%202.495%2010.323%205.877-6.77%208.72-13.71%2012.28-20.83%2010.68-7.66-1.61-14.95-8.9-22.07-21.9%205.16-1.07%209.96.172%2014.59%203.56%203.73%202.67%206.94%206.4%209.79%2011.21%200-1.78-.89-4.45-2.67-7.83zM341.2%20349.73c10.322%202.312%2019.04%206.94%2026.34%2013.526%2010.856%209.79%2013.882%2021.71%209.075%2035.42-3.202%209.073-10.145%2016.91-20.824%2023.49-10.14%206.23-22.78%2010.855-37.91%2013.882-14.77%203.025-30.25%204.27-46.63%203.738-16.91-.712-32.93-3.205-47.88-7.475%204.45-12.46%204.63-27.76.72-46.1%206.41%203.39%2014.06%205.17%2022.79%205.52%208.01.36%2015.67-.53%2022.79-2.85%207.12-2.49%2012.28-5.69%2015.31-9.96%203.38-4.63%203.74-9.79.89-15.48l12.99-5.69c5.16-2.14%209.61-3.92%2013.17-5.16%2010.5-3.38%2020.11-4.45%2029.19-2.85zm-134.38-35.776l1.42-1.246-3.915%206.77-1.246.89%203.74-6.41zm22.25%2045.92c2.665-1.603%204.8-2.492%206.225-2.848l-2.67%207.83c-.18%201.955.89%203.56%203.203%204.625%202.136%201.25%204.806%201.96%208.366%202.31%208.008.72%2014.77-.53%2020.11-3.55.712-.53%201.78-2.49%203.026-5.87%201.245-3.56%202.313-5.87%202.67-6.4%207.296%201.96%2011.923%205.52%2013.882%2010.68%201.957%204.63%201.067%208.9-2.67%2012.28-2.492%202.32-6.05%204.27-10.678%206.05-4.807%201.61-9.79%202.67-15.31%203.21-13.17%201.07-24.028-1.06-32.748-6.4l-1.425-2.67c3.56-4.81%204.45-10.14%202.67-15.66%201.07-1.07%202.85-2.13%205.35-3.56zm6.94-36.84l9.075%201.066c4.45.177%207.83.177%209.79-.178-7.12%2011.21-12.995%2020.822-17.265%2029.188-6.054%201.602-11.037%204.27-14.774%208.188-.18-.89-.89-2.134-2.137-3.2-1.25-1.244-2.31-1.78-3.38-1.957%209.79-17.97%2015.84-29.01%2018.69-33.1zm-32.93%2048.41c4.093-1.423%207.3-3.56%209.61-6.053l3.92-7.29c2.67%201.43%204.45%203.56%205.16%206.94.71%203.38%200%206.76-1.96%2010.14-2.314%203.92-5.874%207.12-10.86%209.44-5.69%202.85-12.99%204.45-21.535%204.81-7.653.18-13.883-.71-18.867-3.02-4.45-1.96-7.12-4.81-8.01-8.36-.71-3.38.356-6.94%203.737-10.5%203.56-3.92%208.9-7.12%2016.197-9.79-3.204%205.34-4.805%208.19-4.805%208.9.53%202.49%202.133%204.45%205.16%205.69%202.67%201.25%206.23%201.78%2010.32%201.61%204.1-.18%208.013-1.07%2011.93-2.49zm15.484%2010.144c3.383%206.41%205.162%2014.778%205.162%2025.28.178%2011.393-1.78%2021-6.052%2029.368-5.518%2011.745-13.705%2021.18-24.562%2028.478-9.61%206.407-20.645%2010.855-33.283%2013.172l-33.82%201.244c-10.68-1.244-19.76-3.914-26.88-7.832-18.16-9.79-28.12-20.822-29.73-32.928-.89-8.01%201.24-15.13%206.58-21.715%208.36-9.79%2021.18-18.154%2038.26-24.918l22.07-8.01c8.9-3.207%2016.02-6.05%2021.36-8.725-.54%204.807%201.42%208.723%206.05%2011.747%204.27%202.85%209.97%204.63%2017.26%205.34%207.12.71%2014.06.18%2020.64-1.6%207.3-1.96%2012.99-4.81%2016.91-8.9zm2.848-164.28c4.986-5.87%2011.216-10.853%2019.226-14.95%207.65-4.09%2015.66-6.76%2023.845-7.83%208.546-1.244%2016.378-.71%2023.14%201.78%206.587%204.808%2011.926%2010.147%2015.84%2015.84%204.63%206.41%207.48%2013.528%208.9%2021.005%201.96%2010.145%201.068%2023.493-2.49%2040.048.89-.71%202.135-3.2%203.738-7.12.36%207.48%203.03%2017.27%207.84%2029.37-13.35%2013.17-30.43%2020.11-51.61%2020.65%203.56-7.83%206.05-14.42%207.3-19.76%205.69-1.96%2011.57-5.16%2017.44-9.43%206.23-4.8%209.79-9.07%2010.5-12.81-6.05%206.76-13.52%2012.46-22.42%2017.27-4.62%202.32-10.32%204.81-17.26%207.3l9.26-1.42c-3.2%208.9-5.87%2015.84-8.01%2020.65-12.81%204.45-25.63%204.45-38.26.18-5.51-1.96-10.14-4.45-14.06-7.48-3.91-3.02-6.58-6.41-8.18-9.79%206.77-12.46%2010.5-23.67%2011.75-33.28%201.2.........完整代码请登录后点击上方下载按钮下载查看