CSS鸭子表

ps酷教程

已于 2022-05-08 16:58:44 修改

阅读量391

点赞数 2

分类专栏：前端学习文章标签： css css3 html

于 2022-05-08 16:53:00 首次发布

本文链接：https://blog.csdn.net/qq_16992475/article/details/124650571

版权

前端学习专栏收录该内容

145 篇文章 7 订阅

订阅专栏

在这里插入图片描述

/* 核心就是，分别给时针、分针、秒针分别都套一个容器，然后让容器转动
   也可以使用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>