CSS3实现指针时钟走动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现指针时钟走动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3实现指针时钟走动特效</title>
    <meta name="viewport"  content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="author" content="Dajun"/>
    <link rel="stylesheet" href="css/clock.css"/>
</head>
<body>
<div class="t2">
    <div class="t3">
        <div class="t4">
            <i class="hour hour3">3</i>
            <i class="hour hour6">6</i>
            <i class="hour hour9">9</i>
            <i class="hour hour12">12</i>

            <div id="miao"></div>
            <div id="fen"></div>
            <div id="shi"></div>
            <div id="point"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var miao = document.getElementById("miao");
    var fen = document.getElementById("fen");
    var shi = document.getElementById("shi");

    var clock = setInterval(function () {
        var nowDate = new Date();//每次读取当前时间
        var hour = nowDate.getHours();
        var minute = nowDate.getMinutes();
        var second = nowDate.getSeconds();

        var circleHour = hour % 12 * 30;
        shi.style.transform = "rotate(" + circleHour + "deg)";//读取到的时间为24小时制，转换为12小时
        fen.style.transform = "rotate(" + minute * 6 + "deg)";
        miao.style.transform = "rotate(" + second * 6 + "deg)";
    }, 1000);
</script>
</body>
</html>

CSS代码(clock.css):

body,div,p,span,span,ul,li,ol,dl,dt,dd{margin:0;padding:0;}
body,html{height:100%;width:100%}
.t1{width:100%;height:100%;background-image:radial-gradient(ellipse at 50% 70%,hsla(240,1%,90%,1),hsla(225,8%,28%,1));}
.t2{position:relative;width:100%;height:100%;background-image:radial-gradient(farthest-side ellipse at 50% 70%,hsla(210,1%,78%,0.73) 100px,rgba(150,150,150,0.7) 400px,hsla(225,4%,18%,0.8) 100%);z-index:-3;}
.t3{position:absolute;left:50%;margin-left:-175px;top:30%;height:350px;width:350px;border-radius:60px;background:#fff;background-image:linear-gradient(#ffffff 40px,#ddecf2 210px,#d3e3e9);}
.t3:before{content:"";position:absolute;box-shadow:0px -4px 3px 3px #b8bdca inset;border-radius:60px;opacity:0.6;height:100%;width:100%;-webkit-filter:blur(1px);z-index:2;}
.t3:after{content:"";height:17px;width:300px;position:absolute;top:97%;margin-left:25px;background:#2a2a2b;-webkit-filter:blur(7px);/*Chrome,Opera*/
 z-index:-1;}
.t4{position:relative;margin:71px;width:210px;height:210px;border-radius:50%;background-image:linear-gradient(#f9fdff,#d9eaf8);box-shadow:0px 0px 28px -8px #eaf7fb;z-index:11;font-size:20px;;color:#8da6b8;font-family:Arial;}
.t4 i{font-style:normal}
.hour{position:absolute;}
.hour3{right:30px;top:50%;margin-top:-7px;}
.hour6{left:50%;bottom:27px;margin-left:-5px;}
.hour9{left:30px;top:50%;margin-top:-7px;}
.hour12{left:50%;top:30px;margin-left:-10px;}
.t4:before{content:"";position:absolute;width:210px;height:210px;border-radius:50%;box-shadow:0px 15px 24px -5px #7a8fae;z-index:10;}
.t4:after{content:"";left:0px;top:0px;position:absolute;width:210px;height:210px;border-radius:50%;box-shadow:0px 4px 4px -1px #7a8fae;z-index:9;}
#miao,#fen,#shi{position:absolute;left:50%;height:210px;width:10px;margin-left:-5px;}
#miao{z-index:23;}
#fen{z-index:22;}
#shi{z-index:21;}
#shi:after{content:"";height:60px;width:6px;position:absolute;top:60px;left:2px;background:#1aa9d8;border-radius:8px 8px 8px 8px;z-index:-1;}
#fen:after{content:"";height:65px;width:4px;position:absolute;top:60px;left:3px;background:#23bcef;border-radius:8px 8px 8px 8px;z-index:-1;}
#miao:after{content:"";height:80px;width:1px;position:absolute;top:48px;left:4px;background:#0dc1fd;z-index:-1;/*box-shadow:5px 10px 8px 3px #B2C3D4;*/
}
#point{position:absolute;left:50%;top:50%;width:16px;height:16px;margin-left:-8px;margin-top:-8px;z-index:999;border-radius:50%;box-shadow:0px 3px 8px -1px #0f4873;}
#point:before,#point:after{content:"";height:10px;width:10px;position:absolute;top:0%;background:#8ba3b6;border-radius:50%;z-index:1;}
#point:before{width:16px;height:16px;}
#point:after{background:#cee3ec;left:3px;top:3px;}

附件:下载该文件资源,减少时间成本(增值服务)