演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css"/>
        <style type="text/css">
            #sz{
                width: 400px;height: 400px;border-radius: 50%;
                margin: 50px auto;
                position: relative;
                background: url(szbj.png) 0 0/100% 100%;
            }
            #sz img{
                width: 100%;height: 100%;
                position: absolute;left: 0;top: 0;
            }
        </style>
    </head>
    <body>
        <div id="sz">
            <img id="szsz" src="szsz.png" >
            <img id="szfz" src="szfz.png" >
            <img id="szmz" src="szmz.png" >
        </div>
        <script>
            window.onload=function(){
                function szzd(){
                    var myDate = new Date;
                    var h24 = myDate.getHours();
                    var h = h24<12?h24:h24-12;
                    var m = myDate.getMinutes();
                    var s = myDate.getSeconds();
                    document.getElementById("szmz").style.transform = "rotateZ("+s*6+"deg)";
                    document.getElementById("szfz").style.transform = "rotateZ("+(m*6+s*0.1)+"deg)";
                    document.getElementById("szsz").style.transform = "rotateZ("+(h*30+m*0.5)+"deg)";
                };
                szzd();
                setInterval(szzd,1000);
            }
        </script>
    </body>
</html>
打开支付宝首页搜“559920739”领红包，领到大红包的小伙伴赶紧使用哦！ （如果你觉得本文不错，请扫描下面二维码随意打赏哦）
最后修改：2020 年 09 月 14 日
© 禁止转载
如果觉得我的文章对你有用，请随意赞赏