纯css实现手表时间走动动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：纯css实现手表时间走动动画效果

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

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

<style>
body {
  font-size: 10px;
  background-size: 500px;
  background-position: 51% -6%;
}
@media (max-width: 599px) {
  body {
    font-size: 6px;
    background: #fff;
  }
}
body .watch {
  width: 40em;
  height: 69em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body .watch .band .top {
  width: 26em;
  height: 5.93em;
  position: absolute;
  background: transparent;
  top: 27%;
  left: 18%;
  background-repeat: no-repeat;
}
body .watch .band .top:after {
  content: '';
  position: absolute;
  top: -10em;
  left: 50%;
  transform: translate(-50%, 0);
  width: 18em;
  height: 15em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 48%, transparent 54%) 50% 17.3%/16.6em 15em, linear-gradient(92deg, #fff 48%, transparent 54%) 0% 0%/1.7em 6.8em, linear-gradient(-92deg, #fff 48%, transparent 54%) 100% 0%/1.7em 6.8em, linear-gradient(#333 48%, #333 54%) 50% 17.3%/16.6em 15em;
  background-repeat: no-repeat;
}
body .watch .band .top:before {
  width: 26em;
  height: 5.93em;
  content: '';
  background: linear-gradient(-97deg, #fff 50%, rgba(51, 51, 51, 0.4) 52%, transparent 53%) 100% 17.3%/4.6em 100%, linear-gradient(97deg, #fff 50%, rgba(51, 51, 51, 0.4) 52%, transparent 53%) 0% 17.3%/4.6em 100%, linear-gradient(to right, rgba(255, 255, 255, 0.2), #EFD5B2, rgba(255, 255, 255, 0.2)) 0% 17.3%/100% 100%, linear-gradient(to bottom, #D2B394, #C7A582) 0% 17.3%/100% 100%, #edd3b0;
  position: absolute;
  top: -3em;
  background-repeat: no-repeat;
}
body .watch .band .bottom {
  width: 26em;
  height: 8.3em;
  position: absolute;
  background: red;
  top: 54%;
  left: 18%;
  background-repeat: no-repeat;
}
body .watch .band .bottom:after {
  content: '';
  position: absolute;
  top: 10em;
  left: 50%;
  transform: translate(-50%, 0);
  width: 18em;
  height: 25em;
  background: linear-gradient(-94deg, transparent 48%, #fff 54%) 0% 100%/1.7em 18em, linear-gradient(94deg, transparent 48%, #fff 54%) 100% 100%/1.7em 18em, linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 9%, rgba(255, 255, 255, 0.05) 12%, transparent, transparent) 50% 100%/100% 85%, linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 9%, rgba(128, 128, 128, 0.1) 13%, rgba(128, 128, 128, 0.1) 60%, #000) 50% 100%/100% 85%, linear-gradient(#333 48%, #333 54%) 50% 100%/100% 85%, linear-gradient(to right, rgba(51, 51, 51, 0.2), transparent, transparent, transparent, rgba(51, 51, 51, 0.2)) 50% 12%/14em 5em, linear-gradient(to right, #8a6d5c, #8A6D5C) 50% 12%/14em 5em, linear-gradient(to bottom, white 50%, transparent 51%) 50% 12%/16.6em 10em;
  background-repeat: no-repeat;
}
body .watch .band .bottom:before {
  width: 26em;
  height: 9.5em;
  position: absolute;
  top: 8em;
  content: '';
  background: linear-gradient(97deg, transparent 50%, rgba(51, 51, 51, 0.4) 52%, #fff 53%) 100% 17.3%/4.6em 100%, linear-gradient(-97deg, transparent 50%, rgba(51, 51, 51, 0.4) 52%, #fff 53%) 0% 17.3%/4.6em 100%, linear-gradient(to right, rgba(255, 255, 255, 0.2), #EFD5B2, rgba(255, 255, 255, 0.2)) 0% 17.3%/100% 100%, linear-gradient(to bottom, #D2B394, #C7A582) 0% 17.3%/100% 100%, #edd3b0;
  background-repeat: no-repeat;
}

.goldring {
  z-index: 3;
  width: 35em;
  height: 35em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(164, 120, 81, 0.3), rgba(174, 135, 96, 0.7)), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(174, 135, 96, 0.3)), linear-gradient(to bottom, rgba(208, 170, 133, 0.4), rgba(174, 135, 96, 0.3)), linear-gradient(to bottom, #ECCCA5, #ECCCA5);
  background-repeat: no-repeat;
}
.goldring:before {
  content: '';
  border-radius: 50%;
  width: 32.5em;
  height: 32.5em;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 70% 100%, rgba(255, 255, 255, 0.04), rgba(19, 20, 25, 0.2)) 50% 50%/100% 100%, radial-gradient(circle at 50% 50%, rgba(42, 44, 52, 0.4) 50%, rgba(0, 0, 0, 0..........完整代码请登录后点击上方下载按钮下载查看