利用css实现简约时钟效果

最新推荐文章于 2022-05-24 10:00:06 发布

wizardAEI

最新推荐文章于 2022-05-24 10:00:06 发布

阅读量144

点赞数

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

本文链接：https://blog.csdn.net/qq_37360324/article/details/116165804

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果如下：

在这里插入图片描述

具体代码：

<!DOCTYPE html>
<html lang="ch-ZN">
<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>
        body{
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            
         }
        .box1{
            background: cadetblue;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            
        }
        body::after{
            position: absolute;
            margin-top: 60vh;
            content: "这是一个时钟";
        }
        body::before{
            z-index: 1;
            border-radius: 50%;
            content: "";
            width: 5px;
            height: 5px;
            transform: translateX(50px);
            background: black;
        }
        .box1::after{
            position:absolute;
            left: 50%;
            content: "";
            width: 1px;
            height: 50px;
            background: black;
            transition: 60s;
            transition-timing-function: steps(60,start);
            transform-origin: bottom;
        }
        body:hover .box1::after{
            transform-origin: bottom;
            transform:rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="box1">
    </div>
    <script src="./test.js"></script>
</body>
</html>

主要利用了css的transform平移和旋转以及transition的步进，实现起来比较容易，赶快试试吧！

对代码有不太理解或者有错误的帮忙指正，都可以联系我或在下面评论。我是AEI，希望能分享更多有趣的东西！

wizardAEI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用css实现简约时钟效果

效果如下：具体代码：<!DOCTYPE html><html lang="ch-ZN"><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"&g
复制链接

扫一扫