纯css布局实现逼真手表秒表指针走动效果代码-html代码-BFW代码库

代码语言：html

代码描述：纯css布局实现逼真手表秒表指针走动效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
        body {
          background-color: #fff;
          min-height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: monospace;
        }
        .wrapper {
          position: relative;
        }
        .watch-case {
          position: absolute;
          z-index: 4;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 400px;
          width: 400px;
          overflow: hidden;
          background-image: linear-gradient(-45deg, #000, #800, #fdfdfd);
          border-radius: 50%;
          box-shadow: 0 0 1px 2px rgba(0,0,0,0.7);
        }
        .watch-center {
          background-image: radial-gradient(#fff, #eeeeef);
          height: 380px;
          width: 380px;
          border-radius: 50%;
          position: absolute;
          z-index: 4;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          box-shadow: -1px -1px 1px 0 #fdfdfd, 0 0 0 2px #b8b7c3, inset 0 0 0 2px #d1d1d6, inset 0 0 0 4px rgba(255,255,255,0.7), inset 0 0 8px 8px rgba(0,0,0,0.1), inset 0 0 50px 50px rgba(0,0,0,0.05);
        }
        .watch-strap {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 480px;
          width: 220px;
          background-color: #101022;
          border-radius: 6px;
          z-index: 2;
        }
        .watch-strap .strap-circle {
          position: absolute;
          height: 409px;
          width: 409px;
          background-color: transparent;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          box-shadow: inset -1px 0 8px 3px #151427, 0 0 2px 1px rgba(255,255,255,0.8);
        }
        .watch-strap .strap-circle:after {
          content: '';
          display: block;
          height: 100%;
          width: 72px;
          left: -2px;
          position: absolute;
          background-color: #fff;
        }
        .watch-strap .strap-circle:before {
          content: '';
          display: block;
          height: 100%;
          width: 72px;
          background-color: #fff;
          position: absolute;
          right: -2px;
        }
        .watch-strap .strap {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 480px;
          width: 220px;
          background-color: #000;
          border-radius: 6px;
          z-index: 2;
          box-shadow: -1px 0 1px 0 #800, inset 0 20px 40px -20px #800, inset 0 -20px 40px -20px rgba(0,0,0,0.7);
        }
        .watch-strap-holder {
          position: absolute;
          background-color: #000;
          height: 150px;
          width: 20px;
          left: -20px;
          border-radius: 3px;
          top: -2px;
          z-index: -1;
          box-shadow: inset 0 0 4px 1px rgba(0,0,0,0.2);
        }
        .watch-strap-holder.left-bottom {
          transform: scaleY(-1);
          top: 332px;
          left: -20px;
        }
        .watch-strap-holder.right-up {
          transform: scaleX(-1);
          left: 220px;
          box-shadow: inset 0 0 4px 1px rgba(0,0,0,0.2);
        }
        .watch-strap-holder.right-up:after {
          border-radius: 14px 70px 0 0;
          box-shadow: inset 0px 3px 1px -2px rgba(0,0,0,0.6), inset -10px -15px 1px 2px #000, inset -2px 10px 4px 2px #000;
        }
        .watch-strap-holder.right-bottom {
          transform: scaleY(-1) scaleX(-1);
          top: 332px;
          left: 220px;
        }
        .watch-strap-holder.right-bottom:after {
          border-radius: 14px 70px 0 0;
          box-shadow: inset 0px 3px 1px -2px rgba(255,255,255,0.6), inset -10px -15px 1px 2px #000, inset -2px 10px 4px 2px #181820;
        }
        .watch-strap-holder:before {
          content: '';
          display: block;
          position: absolute;
          background-color: #000;
          height: 150px;
          width: 10px;
          border-radius: 3px 0;
          transform: rotate(4deg);
          left: -5px;
          box-shadow: inset 5px 5px 4px -5px rgba(0,0,0,0.2);
        }
        .watch-strap-holder:after {
          content: '';
          display: block;
          position: absolute;
          background-color: transparent;
          background-image: linear-gradient(to bottom, transparent, #fff);
          height: 150px;
          width: 30px;
          border-radius: 12px;
          transform: rotate(4deg);
          top: 10px;
          left: -4px;
          box-shadow: inset -3px 8px 2px 2px #181820;
        }
        .reflection {
          content: '';
          display: block;
          height: 16px;
          width: 30px;
          position: absolute;
          top: 50px;
          left: 50px;
          background-color: #080817;
          filter: blur(1px);
          transform: rotate(-56deg) skewX(30deg) scale(0.6);
        }
        .reflection.bottom {
          top: 337px;
          left: 312px;
        }
        .reflection.bottom:after {
          height: 39px;
          width: 43px;
          left: -60px;
          top: -14px;
          transform: rotate(-44deg);
          box-shadow: 34px 17px 0 8px #080817;
        }
        .reflection:after {
          content: '';
          display: block;
          background-color: transparent;
          height: 40px;
          width: 30px;
          border-radius: 50%;
          background-color: transparent;
          position: absolute;
          left: -48px;
          top: -11px;
          transform: rotate(-69deg);
          box-shadow: 34px 17px 0 20px #080817;
        }
        .reflection:before {
          content: '';
          display: block;
          background-color: transparent.........完整代码请登录后点击上方下载按钮下载查看