古老的时钟秒表旋转效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：古老的时钟秒表旋转效果

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


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

<style>
@import url(https://fonts.googleapis.com/css?family=Old+Standard+TT);
.bg {
  background-color: #000;
  background-image: radial-gradient(center, rgba(241, 200, 171, 0.2), rgba(255, 255, 255, 0));
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.clock {
  position: absolute;
  display: block;
  height: 400px;
  width: 400px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
  background-color: #383434;
  color: #f1c8ab;
  font-family: "Old Standard TT";
  box-shadow: inset 0px 0px 12px 0px #111111, 0px 0px 0px 8.8px #404241, 0px 0px 0px 26.4px #202021, 0px 0px 0px 33.6px #edc7ae, 0px 0px 0px 36.8px #b6a091, 0px 0px 0px 44.4px #edc7ae;
}
.clock::before {
  content: "";
  width: 70px;
  height: 116.66666668px;
  border-radius: 8%;
  box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.4);
  position: absolute;
  left: calc(50% - 35px);
  top: 16px;
}
.clock::after {
  content: "";
  width: 492px;
  height: 492px;
  border-radius: 50%;
  background: radial-gradient(ellipse at top center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.9) 100%);
  position: absolute;
  top: -46px;
  left: -46px;
}
.clock img {
  display: block;
  position: absolute;
  height: 400px;
  width: 400px;
  z-index: 99;
  opacity: 0.65;
}

figure {
  position: absolute;
  display: block;
  border-radius: 50%;
  margin: 0;
  text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
  /*
    &::before {
      content: "";
      display: block;
      position: absolute;
      background-color: transparentize(#383434,0.3);
      border-radius: 50%;
      box-shadow: 
        0px 0px 0px 2px darken(desaturate(#f1c8ab,30%),20%),  
        0px 0px 8px rgba(0,0,0,0.2);
    }
  */
}
figure span {
  display: block;
  position: absolute;
  width: 32.72724px;
  left: calc(50% + -16.36362px);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
figure span::before {
  content: attr(val);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  line-height: 1;
}

.hour-ten, .hour {
  top: 5%;
}

.min-ten, .min {
  top: calc(5% + 28px);
}

.sec-ten, .sec {
  top: calc(5% + 82px);
}

.hour-ten {
  width: 220px;
  height: 220px;
  font-size: 28px;
  -webkit-animation: "hour-ten" 43200000ms linear infinite;
          animation: "hour-ten" 43200000ms linear infinite;
  /*
    &::before {
      top: $font; right: $font; bottom: $font; left: $font;
    }
  */
  left: calc(50% - 126.36362px);
}
@-webkit-keyframes hour-ten {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  24.999537037% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  49.999537037% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  74.999537037% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  99.999537037% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes hour-ten {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  24.999537037% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  49.999537037% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  74.999537037% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  99.999537037% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.hour-ten span {
  height: 110px;
}
.hour-ten span:nth-child(1) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.hour-ten span:nth-child(2) {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.hour-ten span:nth-child(3) {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
.hour-ten span:nth-child(4) {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

.hour {
  width: 340px;
  height: 340px;
  font-size: 28px;
  -webkit-animation: "hour" 43200000ms linear infinite;
          animation: "hour" 43200000ms linear infinite;
  /*
    &::before {
      top: $font; right: $font; bottom: $font; left: $font;
    }
  */
  left: calc(50% - 153.63638px);
}
@-webkit-keyframes hour {
  0% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  8.3328703704% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  8.3333333333% {
    -webkit-transform: rotate(330deg);
            transform: rotate(330deg);
  }
  16.6662037037% {
    -webkit-transform: rotate(330deg);
            transform: rotate(330deg);
  }
  16.6666666667% {
    -webkit-transform: rotate(300deg);
            transform: rotate(300deg);
  }
  24.999537037% {
    -webkit-transform: rotate(300deg);
            transform: rotate(300deg);
  }
  25% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  33.3328703704% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  33.3333333333% {
    -webkit-transform: rotate(240deg);
            transform: rotate(240deg);
  }
  41.6662037037% {
    -webkit-transform: rotate(240deg);
            transform: rotate(240deg);
  }
  41.6666666667% {
    -webkit-transform: rotate(210deg);
            transform: rotate(210deg);
  }
  49.999537037% {
    -webkit-transform: rotate(210deg);
            transform: rotate(210deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  58.3328703704% {
    -webkit-tr.........完整代码请登录后点击上方下载按钮下载查看