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

纯css实现手表时间走动动画效果

代码语言：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.7.........完整代码请登录后点击上方下载按钮下载查看