html模拟手表报时指针动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：html模拟手表报时指针动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        /**
 * If you're looking for any type of best practice, probably best to look elsewhere. :)
 */
@import url("https://fonts.googleapis.com/css?family=Archivo:600,700&display=swap");
        .case {
            filter: drop-shadow(0 0.5vmin 0.25vmin rgba(0, 0, 0, 0.3));
            position: relative;
        }

        .case-gradient-1 {
            background: linear-gradient(0deg, #545454 0%, #595b5a 13%, #c3c4be 50%, #c3c4be 77%, #626260 100%);
            border-radius: 100%;
            height: 84vmin;
            width: 84vmin;
            position: absolute;
            top: calc(50% - 42vmin);
            left: calc(50% - 42vmin);
            z-index: 9;
        }

        .case-gradient-2 {
            background: linear-gradient(180deg, #b9b9b7 0%, #b9b9b7 5%, #222325 10%, #737373 30%, #c4c2c3 50%, #dbd9da 74%, #c7c3c2 82%, #cbc6c2 100%);
            border-radius: 100%;
            height: 88vmin;
            width: 88vmin;
            position: absolute;
            top: calc(50% - 44vmin);
            left: calc(50% - 44vmin);
            z-index: 8;
        }

        .face {
            background-color: #1e1e20;
            border-radius: 100%;
            height: 80vmin;
            position: relative;
            width: 80vmin;
            z-index: 10;
        }

        .face-border-1 {
            border: 1vmin solid #1e1e20;
            box-shadow: inset 0 0 0 0.5vmin white;
            border-radius: 100%;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
        }

        .dial .index {
            background-color: white;
            height: 4vmin;
            left: calc(50% - 0.375vmin);
            position: absolute;
            top: 0;
            transform: rotate(calc(6deg * var(--index)));
            transform-origin: 50% 40vmin;
            width: 0.75vmin;
        }
        .dial .index:nth-child(5n + 5) {
            height: 8vmin;
            left: calc(50% - 0.75vmin);
            width: 1.5vmin;
        }
        .dial .index:nth-child(15) {
            height: 4vmin;
        }
        .dial .index:nth-child(60):after {
            background-color: white;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            content: "";
            display: block;
            height: 6vmin;
            left: calc(50% - 4vmin);
            position: absolute;
            top: calc(100% + 2vmin);
            width: 8vmin;
        }
        .dial .index:nth-child(60):before {
            background-color: white;
            border-radius: 100%;
            box-shadow: 6.5vmin 0 0 0 white;
            content: "";
            display: block;
            height: 2vmin;
            position: absolute;
            top: calc(100% + 2vmin);
            left: -3.5vmin;
            width: 2vmin;
        }
        .dial .index[data-arabic-number]:after {
            color: white;
            content: attr(data-arabic-number);
            font-size: 9vmin;
            left: 50%;
            position: absolute;
            top: calc(100% + 0.5vmin);
            transform: translateX(-50%) rotate(calc(-6deg * var(--index)));
        }
        .dial .hand {
            background-color: #1b1b79;
            border-radius: 100%;
            filter: drop-shadow(0 0 0.75vmin rgba(0, 0, 0, 0.5));
            height: 5vmin;
            left: 37.5vmin;
            position: absolute;
            top: 37.5vmin;
            transform-origin: 50%;
            width: 5vmin;
            z-index: 1;
        }
        .dial .hand:before, .dial .hand:after {
            bottom: 3.5vmin;
            content: "";
            left: -1vmin;
            display: block;
            height: 25vmin;
            position: absolute;
            width: 7vmin;
            z-index: 1;
        }
        .dial .hand:before {
            background-color: #1b1b79;
            clip-path: polygon(50% 0%, 100% 65%, 50% 100%, 0% 65%);
        }
        .dial .hand:after {
            background: linear-gradient(90deg, #c8c8c8 0%, white 50%, #c8c8c8 100%);
            clip-path: polygon(50% 10%, 90% 65%, 50% 92.5%, 10% 65%);
        }
        .dial .hand--hours:before, .dial .hand--hours:after {
            bottom: 3.5vmin;
            height: 25vmin;
        }
        .dial .hand--minutes {
            height: 3.5vmin;
            left: 38.25vmin;
            top: 38.25vmin;
            width: 3.5vmin;
        }
        .dial .hand--minutes:before, .dial .hand--minutes:after {
            bottom: 2vmin;
            height: 38vmin;
            left: -1.75vmin;
        }

        .subdial {
            box-shadow: 0 0 0 0.5vmin #19191a, inset 0 0 1vmin 0 #111;
            border-radius: 100%;
            counter-reset: seconds;
            height: 30vmin;
            position: absolute;
            right: 5vmin;
            top: 25vmin;
            width: 30vmin;
        }
        .subdial .hand {
            background-color: white;
            height: 18vmin;
            left: calc(50% - 0.25vmin);
            position: absolute;
            top: 0;
            transform-origin: 50% 15vmin;
            width: 0.5vmin;
        }
        .subdial .hand:after {
            background-color: white;
            border-radius: 100%;
            content: "";
            display: block;
            height: 2vmin;
            left: calc(50% - 1vmin);
            position: absolute;
            top: 14vmin;
            width: 2vmin;
        }
        .subdial .index {
            background-color: white;
            height: 1.5vmin;
            left: calc(50% - 0.0375vmin);
            position: absolute;
            top: 0;
            transform: rotate(calc(6deg * var(--index)));
            transform-origin: 50% 15vmin;
            width: 0.075vmin;
        }
        .subdial .index:nth-child(5n + 5) {
            left: calc(50% - 0.25vmin);
            width: 0.75vmin;
        }
        .subdial .index:after {
            color: white;
            content: attr(data-arabics);
            left: 50%;
            position: absolute;
            top: calc(100% + 0.5vmin);
            transform: translateX(-50%) rotate(calc(-30deg * var(--index)));
        }

        .svg {
            position: absolute;
            width: 0;
            height: 0;
        }

        .lug {
            width: 15vmin;
            height: 30vmin;
            clip-path: url(#lug);
            position: absolute;
        }
        .lug--1 {
            background: linear-gradient(90deg, #303133 0%, rgba(122, 124, 123, 0.1) 9%, rgba(255, 255, 255, 0) 100%), linear-gradient(-110deg, #e3e2e0 7%, rgba(122, 124, 123, 0.5) 25%, rgba(185, 183, 184, 0.5) 35%, rgba(185, 183, 184, 0.5) 74%, rgba(214, 213, 213, 0.5) 100%), linear-gradient(180deg, #b9b9b7 0%, #b9b9b7 5%, #222325 10%, #737373 30%, #c4c2c3 50%, #dbd9da 74%, #c7c3c2 82%, #cbc6c2 100%);
            bottom: calc(100% - 17.5vmin);
            left: 2.5vmin;
        }
        .lug--2 {
            bottom: calc(100% - 17.5vmin);
            background: linear-gradient(90deg, #303133 0%, rgba(122, 124, 123, 0.1) 9%, rgba(255, 255, 255, 0) 100%), linear-gradient(-110deg, #e3e2e0 7%, rgba(122, 124, 123, 0.5) 25%, rgba(185, 183, 184, 0.5) 35%, rgba(185, 183, 184, 0.5) 74%, rgba(214, 213, 213, 0.5) 100%), linear-gradient(180deg, #b9b9b7 0%, #b9b9b7 5%, #222325 10%, #737373 30%, #c4c2c3 50%, #dbd9da 74%, #c7c3c2 82%, #cbc6c2 100%);
            right: 2.5vmin;
            transform: rotateY(180deg);
        }
        .lug--3 {
            background: linear-gradient(-30deg, #6b6865 40%, #a39f9c 52%, #e7e3e4 100%);
            top: calc(100% - 17.5vmin);
            left: 2.5vmin;
            transform: rotateX(180deg);
        }
        .lug--4 {
            background: linear-gradient(-30deg, #6b6865 40%, #a39f9c 52%, #e7e3e4 100%);
            top: calc(100% - 17.5vmin);
            right: 2.5vmin;
            transform: rotateX(180deg) rotateY(180deg);
        }

        .lume {
            background-color: #0d0d10;
        }
        .lume .face-border-1 {
            box-shadow: none;
        }
        .lume [class*="case-gradient"]:after {
            background-color: rgba(0, 0, 0, 0.8);
            border-radius: 100%;
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
         .........完整代码请登录后点击上方下载按钮下载查看