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

html模拟手表报时指针动画效果

代码语言：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: .........完整代码请登录后点击上方下载按钮下载查看