使用HTML+CSS 动画效果实现简单的钟表效果

最新推荐文章于 2024-05-12 06:37:18 发布

我很想享受生活

最新推荐文章于 2024-05-12 06:37:18 发布

阅读量1k

点赞数 2

分类专栏： web学习文章标签： css html

本文链接：https://blog.csdn.net/qq_45449455/article/details/123855146

版权

web学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

为了显示更明显时间整体调快了一些

使用animation动画效果实现简单的带有时分秒针的钟表

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .clock-wrapper{
            width: 400px;
            height: 400px;
            background-color: yellowgreen;
            animation: cl-run 60s steps(60);
        }
        .clock{
            width: 5px;
            height: 200px;
            background-color: red;
            margin: 0 auto;
        } */

        /* 表盘样式 */
        .clock{
            width: 400px;
            height: 400px;
            /* background-color: aqua; */
            border-radius: 50%;
            /* border: 2px solid black; */
            position:relative;
            margin: 50px auto;
            background-image: url(./img/10/表盘.webp);
            background-size: contain;
        }
        .clock div{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        /* 时针 */
        .hour-wrapper{
            width: 40%;
            height: 40%;
            /* background-color: red; */
            animation: cl-run 7200s linear infinite;
        }
        .hour-wrapper .hour{
            height: 50%;
            width: 6px;
            background-color: black;
            margin: 0 auto;
        }

        /* 分针 */
        .min-wrapper{
            width: 55%;
            height: 55%;
            /* background-color: red; */
            animation: cl-run 600s steps(60) infinite;
        }
        .min-wrapper .min{
            height: 50%;
            width: 4px;
            background-color: black;
            margin: 0 auto;
        }

        /* 秒针 */
        .sec-wrapper{
            width: 70%;
            height: 70%;
            /* background-color: red; */
            animation: cl-run 10s steps(60) infinite;
        }
        .sec-wrapper .sec{
            height: 50%;
            width: 2px;
            background-color: black;
            margin: 0 auto;
        }
      
        @keyframes cl-run{
            form{
                transform: rotateZ(0);
            }
            to{
                transform: rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
    <!-- <div class="clock-wrapper">
        <div class="clock">
        </div>
    </div> -->

    <!-- 钟表容器  -->
    <div class="clock">
        <!-- 时针容器 -->
        <div class="hour-wrapper">
            <!-- 时针 -->
            <div class="hour">

            </div>
        </div>
         <!-- 分针容器 -->
         <div class="min-wrapper">
            <!-- 分针 -->
            <div class="min">
                
            </div>
        </div>
         <!-- 秒针容器 -->
         <div class="sec-wrapper">
            <!-- 秒针 -->
            <div class="sec">
                
            </div>
        </div>
    </div>
    
</body>
</html>

最终实现效果：为了效果明显，将秒针一圈调为了十秒

视频不知道怎么发

我很想享受生活

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
使用HTML+CSS 动画效果实现简单的钟表效果

为了显示更明显时间整体调快了一些使用animation动画效果实现简单的带有时分秒针的钟表代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de
复制链接

扫一扫