纯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.4) 70%, transparent) 50% 50%/100% 100%, radial-gradient(circle at 50% 50%, black, #28292f, transparent) 50% 50%/100% 100%, radial-gradient(circle at 50% 50%, #191c23, #191c23, transparent) 50% 50%/100% 100%;
  position: absolute;
  background-repeat: no-repeat;
}
.goldring:after {
  content: '';
  width: 1.4em;
  height: 5em;
  left: 102%;
  top: 51.4%;
  transform: translate(-50%, -50%);
  position: absolute;
  background-repeat: no-repeat;
}
.goldring .time {
  width: 32.5em;
  height: 32.5em;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: relative;
  width: 32.5em;
  height: 32.5em;
  border-radius: 50%;
  padding: 0;
  list-style: none;
}
.goldring .time > * {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.25em;
  width: 0.5em;
  height: 0.5em;
}
.goldring .time > *:nth-of-type(1) {
  transform: rotate(0deg) translate(16.25em) rotate(0deg);
}
.goldring .time > *:nth-of-type(2) {
  transform: rotate(30deg) translate(16.25em) rotate(-30deg);
}
.goldring .time > *:nth-of-type(3) {
  transform: rotate(60deg) translate(16.25em) rotate(-60deg);
}
.goldring .time > *:nth-of-type(4) {
  transform: rotate(90deg) translate(16.25em) rotate(-90deg);
}
.goldring .time > *:nth-of-type(5) {
  transform: rotate(120deg) translate(16.25em) rotate(-120deg);
}
.goldring .time > *:nth-of-type(6) {
  transform: rotate(150deg) translate(16.25em) rotate(-150deg);
}
.goldring .time > *:nth-of-type(7) {
  transform: rotate(180deg) translate(16.25em) rotate(-180deg);
}
.goldring .time > *:nth-of-type(8) {
  transform: rotate(210deg) translate(16.25em) rotate(-210deg);
}
.goldring .time > *:nth-of-type(9) {
  transform: rotate(240deg) translate(16.25em) rotate(-240deg);
}
.goldring .time > *:nth-of-type(10) {
  transform: rotate(270deg) translate(16.25em) rotate(-270deg);
}
.goldring .time > *:nth-of-type(11) {
  transform: rotate(300deg) translate(16.25em) rotate(-300deg);
}
.goldring .time > *:nth-of-type(.........完整代码请登录后点击上方下载按钮下载查看