[JavaScript知识库] CSS鸭子表

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> CSS鸭子表 -> 正文阅读

[JavaScript知识库]CSS鸭子表

在这里插入图片描述

/* 核心就是，分别给时针、分针、秒针分别都套一个容器，然后让容器转动
   也可以使用transform-origin定义旋转的基点
   重要的相对定位和绝对定位的应用(其中的百分比是相对于包含块而言的)
   还有元素居中的方法
 */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }

        .box {
            width: 400px;
            height: 400px;
            /* background-color: silver; */
            position: relative;
            margin: 10px auto;
            border-radius: 50%;
            background-image: url(./img/bg3.jpg);
            background-size: contain;
        }

        .box > div {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
       
        .sec-wrapper {
            width: 80%;
            height: 80%;
            /* background-color: #bfa; */
            animation: r 10s steps(60,end) infinite;
        }

        .sec {
            height: 50%;
            background-color: red;
            width: 2px;
            left: 0;
            right: 0;
            margin: 0 auto;
        }

        .min-wrapper {
            width: 60%;
            height: 60%;
            /* background-color: #bfa; */
            animation: r 600s steps(60,end) infinite;
        }

        .min {
            height: 50%;
            background-color: greenyellow;
            width: 4px;
            left: 0;
            right: 0;
            margin: 0 auto;
        }

        .hour-wrapper {
            width: 30%;
            height: 30%;
            /* background-color: #bfa; */
            animation: r 3600s steps(60,end) infinite;
        }

        .hour {
            height: 50%;
            background-color: rgb(47, 217, 255);
            width: 6px;
            left: 0;
            right: 0;
            margin: 0 auto;
        }

        @keyframes r {
            from {
                transform: rotateZ(0)
            }

            to {
                transform: rotateZ(360deg)
            }
        }

    </style>
</head>
<body>
    <div class="box">

        <div class="sec-wrapper">
            <div class="sec"></div>
        </div>

        <div class="min-wrapper">
            <div class="min"></div>
        </div>

        
        <div class="hour-wrapper">
            <div class="hour"></div>
        </div>


    </div>
</body>
</html>