css绘制一个立体时钟走动动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css绘制一个立体时钟走动动画效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">


    <style>
        body {
          width: 98%;
          height: 98vh;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          background-image: -webkit-linear-gradient(left, #a9d4d5 10%, #b2e6e7 10%, 12%, #a9d4d5 12%, #a9d4d5 20%, #b2e6e7 20%, 22%, #a9d4d5 22%, #a9d4d5 30%, #b2e6e7 30%, 32%, #a9d4d5 32%, #a9d4d5 40%, #b2e6e7 40%, 42%, #a9d4d5 42%, #a9d4d5 50%, #b2e6e7 50%, 52%, #a9d4d5 52%, #a9d4d5 60%, #b2e6e7 60%, 62%, #a9d4d5 62%, #a9d4d5 70%, #b2e6e7 70%, 72%, #a9d4d5 72%, #a9d4d5 80%, #b2e6e7 80%, 82%, #a9d4d5 82%, #a9d4d5 90%, #b2e6e7 90%, 92%, #a9d4d5 92%);
          background-image: linear-gradient(to right, #a9d4d5 10%, #b2e6e7 10%, 12%, #a9d4d5 12%, #a9d4d5 20%, #b2e6e7 20%, 22%, #a9d4d5 22%, #a9d4d5 30%, #b2e6e7 30%, 32%, #a9d4d5 32%, #a9d4d5 40%, #b2e6e7 40%, 42%, #a9d4d5 42%, #a9d4d5 50%, #b2e6e7 50%, 52%, #a9d4d5 52%, #a9d4d5 60%, #b2e6e7 60%, 62%, #a9d4d5 62%, #a9d4d5 70%, #b2e6e7 70%, 72%, #a9d4d5 72%, #a9d4d5 80%, #b2e6e7 80%, 82%, #a9d4d5 82%, #a9d4d5 90%, #b2e6e7 90%, 92%, #a9d4d5 92%);
        }
        
        .face {
          position: relative;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: start;
              -ms-flex-align: start;
                  align-items: flex-start;
          width: 400px;
          height: 400px;
          background: #eee;
          background-image: -webkit-linear-gradient(top left, #eee, #f5f5f5);
          background-image: linear-gradient(to bottom right, #eee, #f5f5f5);
          border-radius: 50%;
          padding: 20px;
          border: 20px solid #d9d9d9;
          box-shadow: 20px 20px 30px -10px rgba(0, 0, 0, 0.4), inset 10px 10px 20px rgba(0, 0, 0, 0.2);
        }
        .face:after {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          content: "";
          border-radius: 50%;
          z-index: 9999;
          background-image: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 0%, 59%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 80%), -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 0%, 30%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 45%);
          background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 0%, 59%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 80%), linear-gradient(to bottom right, rgba(255, 255, 255, 0) 0%, 30%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 45%);
        }
        
        .numbers {
          position: relative;
        }
        
        .number {
          position: absolute;
          height: 200px;
          -webkit-transform-origin: 0 100%;
                  transform-origin: 0 100%;
          font-size: 28px;
        }
        .number:nth-child(1) {
          -webkit-transform: rotate(25deg);
                  transform: rotate(25deg);
        }
        .number:nth-child(1) span {
          display: block;
          -webkit-transform: rotate(-25deg);
                  transform: rotate(-25deg);
        }
        .number:nth-child(2) {
          -webkit-transform: rotate(55deg);
                  transform: rotate(55deg);
        }
        .number:nth-child(2) span {
          display: block;
          -webkit-transform: rotate(-55deg);
                  transform: rotate(-55deg);
        }
        .number:nth-child(3) {
          -webkit-transform: rotate(85deg);
                  transform: rotate(85deg);
        }
        .number:nth-child(3) span {
          display: block;
          -webkit-transform: rotate(-85deg);
                  transform: rotate(-85deg);
        }
        .number:nth-child(4) {
          -webkit-transform: rotate(115deg);
                  transform: rotate(115deg);
        }
        .number:nth-child(4) span {
          display: block;
          -webkit-transform: rotate(-115deg);
                  transform: rotate(-115deg);
        }
        .number:nth-child(5) {
          -webkit-transform: rotate(145deg);
                  transform: rotate(145deg);
        }
        .number:nth-child(5) span {
          display: block;
          -webkit-transform: rotate(-145deg);
                  transform: rotate(-145deg);
        }
        .number:nth-child(6) {
          -webkit-transform: rotate(175deg);
                  transform: rotate(175deg);
        }
        .number:nth-child(6) span {
          display: block;
          -webkit-transform: rotate(-175deg);
                  transform: rotate(-175deg);
        }
        .number:nth-child(7) {
          -webkit-transform: rotate(205deg);
                  transform: rotate(205deg);
        }
        .number:nth-child(7) span {
          display: block;
          -webkit-transform: rotate(-205deg);
                  transform: rotate(-205deg);
        }
        .number:nth-child(8) {
          -webkit-transform: rotate(235deg);
                  transform: rotate(235deg);
        }
        .number:nth-child(8) span {
          display: block;
          -webkit-transform: rotate(-235deg);
                  transform: rotate(-235deg);
        }
        .number:nth-child(9) {
          -webkit-transform: rotate(265deg);
                  transform: rotate(265deg);
        }
        .number:nth-child(9) span {
          display: block;
          -webkit-transform: rotate(-265deg);
                  transform: rotate(-265deg);
        }
        .number:nth-child(10) {
          -webkit-transform: rotate(295deg);
                  transform: rotate(295deg);
        }
        .number:nth-child(10) span {
          display: block;
          -webkit-transform: rotate(-295deg);
                  transform: rotate(-295deg);
        }
        .number:nth-child(11) {
          -webkit-transform: rotate(325deg);
                  transform: rotate(325deg);
        }
        .number:nth-child(11) span {
          display: block;
          -webkit-transform: rotate(-325deg);
                  transform: rotate(-325deg);
        }
        .number:nth-child(12) {
          -webkit-transform: rotate(355deg);
                  transform: rotate(355deg);
        }
        .number:nth-child(12) span {
          display: block;
          -webkit-transform: rotate(-355deg);
                  transform: rotate(-355deg);
        }
        
        .arms {
          position: absolute;
          top: 50%;
          left: 50%;
        }
        .arms:after {
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 30px;
          height: 30px;
          content: "";
          background: #ccc;
          border-radius: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          z-index: 999;
        }
   .........完整代码请登录后点击上方下载按钮下载查看