transform之时钟特效

最新推荐文章于 2024-06-23 17:09:38 发布

PromiseXuu

最新推荐文章于 2024-06-23 17:09:38 发布

阅读量656

点赞数

分类专栏： CSS 文章标签： transform

前端小白，博客搬家掘金Xpromise，欢迎交流，撒花o(*￣▽￣*)ブ

本文链接：https://blog.csdn.net/XZZ2222/article/details/79994892

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #wrap{
            width: 300px;
            height: 300px;
            background: #F0F0F0;
            margin: 200px auto;
            position: relative;
        }
        #hour{
            width: 6px;
            height: 60px;
            background: #000;
            position: absolute;
            top: 90px;
            left: 147px;
            /*重置时针基点，让其沿着绿色圆点中心转动*/
            transform-origin: 3px 60px;
        }
        #min{
            position: absolute;
            top: 70px;
            left: 148px;
            width: 4px;
            height: 80px;
            background: #000;
            /*重置分针基点，让其沿着绿色圆点中心转动*/
            transform-origin: 2px 80px;
        }
        #sec{
            position: absolute;
            top: 50px;
            left: 149px;
            width: 2px;
            height: 100px;
            background: red;
/*重置秒针基点，让其沿着绿色圆点中心转动*/
            transform-origin: 1px 100px;
        }
        #icon{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: yellowgreen;
            position: absolute;
            top: 140px;
            left: 140px;
        }
        #list{
            list-style: none;
        }
        #list li{
            width: 2px;
            height: 8px;
            background: #000;
            position: absolute;
            top: 0;
            left: 149px;
          /*重置li的基点*/
            transform-origin: 1px 150px;
        }
        #list li:nth-child(5n+1){
            width: 4px;
            height: 12px;
            /*li的高度重新设置后会有1px 的偏差，所以重置基点*/
            transform-origin: 2px 150px;
        }

    </style>
</head>
<body>
<div id="wrap">
    <ol id="list">

    </ol>
    <!--时针-->
    <div id="hour"></div>
    <!--fen针-->
    <div id="min"></div>
    <!--秒针-->
    <div id="sec"></div>
    <div id="icon"></div>
</div>
</body>
<script>
    window.οnlοad=function () {
        var list=document.getElementById("list");

        for(var i=0;i<60;i++){
            var li=document.createElement("li");
            li.style.transform='rotate('+(6*i)+'deg)';
            list.appendChild(li);
        }

//        获取时针，分针，秒针
        var hour=document.getElementById("hour");
        var min=document.getElementById("min");
        var sec=document.getElementById("sec");

//        获取当前的时间
        setInterval(function () {
            var date=new Date();
            var seconds=date.getSeconds();
            var minites=date.getMinutes()+seconds/60;
            var hours=date.getHours()+minites/60;


            hour.style.transform='rotate('+(30*hours) +'deg)';
            min.style.transform='rotate('+(6*minites) +'deg)';
            sec.style.transform='rotate('+(6*seconds) +'deg)';
        },1000)

    }
</script>
</html>

最终的效果：