css模拟钟表

丁七岁

于 2020-09-24 16:58:01 发布

阅读量399

点赞数 5

分类专栏： css 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_43612538/article/details/108778164

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这是一个使用HTML5和CSS3编写的模拟钟表练习。代码通过CSS的动画特性实现了时针、分针和秒针的转动效果，背景采用图片素材。钟表的各个部分如时针、分针和秒针都设置了相应的动画属性，以模拟实际钟表的运动。

摘要由CSDN通过智能技术生成

只有html5和css3，一个模拟钟表的练习。

<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>钟表测试test</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .watch-wrapper{
                width: 520px;
                height: 520px;
                /*background-color: #888888;*/
                border-radius: 50%;
                margin: 150px auto 0;
                position: relative;
                background-image: url("img/bg.png");
                background-size: cover;
            }
            /*让后面的div全部居中 div里面套着时针 分针和 秒针*/
            .watch-wrapper > div{
                /*这三个针 同一个圆心 设置定位*/
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                /*background-color: #f10215;*/
            }

            /*创建关键帧 并绑定  垂直这个面的一个轴  绕着ta转 一条线 我让他出现一半
            rotateZ() 函数定义了一个转换，它可以让一个元素围绕横Z轴旋转，而不会对其进行变形。它的结果是一个<transform-function>数据类型。
            */
            @keyframes run {
                from{
                    transform: rotateZ(0);
                }
                to{
                    transform: rotateZ(1turn);/*旋转一圈*/
                }
            }

            /*设置这三个针*/
            .h-wrapper{
                width: 70%;
                height: 70%;
                animation: run 43200s linear infinite;/*转1圈 12小时 43200秒*/
            }
            .h-wrapper .h{
                height: 50%;
                width: 6px;
                margin: 0 auto;
                background-color: #333333;
            }
            /*后面分针 秒针 直接复制*/
            .m-wrapper{
                width: 80%;
                height: 80%;
                animation: run 3600s linear infinite;
            }
            .m-wrapper .m{
                height: 50%;
                width: 4px;
                margin: 0 auto;
                background-color: #c4712e;
            }
            .s-wrapper{
                width: 70%;
                height: 70%;
                animation: run 60s linear infinite;
            }
            .s-wrapper .s{
                height: 50%;
                width: 2px;
                margin: 0 auto;
                background-color: #f41d21;
            }

        </style>
    </head>
    <body>
        <div class="watch-wrapper">
            <!--时针-->
            <div class="h-wrapper">
                <div class="h"></div>
            </div>
            <!--分针-->
            <div class="m-wrapper">
                <div class="m"></div>
            </div>
            <!--秒针-->
            <div class="s-wrapper">
                <div class="s"></div>
            </div>
        </div>
    </body>
</html>