用CSS3怎样完成一个动画时钟特效？

发布时间：2023-07-31 14:32:53 所属栏目：语言来源：

导读：时钟效果的实现有很多种方法，我们之前也介绍了很多种，这篇文章给大家分享用CSS3实现走动的时钟效果，那么这样的动画时钟效果效果具体怎样做呢？接下来我们详细的了解看看。

我们可以利用transform的旋转ro

时钟效果的实现有很多种方法，我们之前也介绍了很多种，这篇文章给大家分享用CSS3实现走动的时钟效果，那么这样的动画时钟效果效果具体怎样做呢？接下来我们详细的了解看看。

    我们可以利用transform的旋转rotate打造一个时钟，再结合JavaScript的定时器让它走起来。

    案例知识点分析：

    1、利用定位完成时钟的绘制。

    2、背景使用了放射性渐变。

    3、利用JavaScript完成刻度和时间数字的旋转。

    4、利用Date()对象获取系统时间，并让时针指向对应的刻度。

    5、利用定时器不断更新时间，完成时针的运动。

    一、HTML源代码

<div id="clock-wrap">

<div id="clock">

     <ul id="list">

        </ul>

    </div>

    <div id="num">

     <ul>

         <li>12</li>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

            <li>7</li>

            <li>8</li>

            <li>9</li>

            <li>10</li>

            <li>11</li>

        </ul>

    </div>

    <div id="hour"></div>

    <div id="min"></div>

    <div id="sec"></div>

    <div id="circle"></div>

</div>

    二、CSS样式

<style id="css">/*注意这里为style标签添加了一个id，在JavaScript里面有获取，并往里面添加css样式。*/

body,ul{

margin:0;

padding:0;}

body{

font:1em "microsoft Yahei";

color:#666;

background-color:#333;}

h1{

text-align:center;

color:#eee;

font-size:3rem;}

li{

list-style:none;}

p{

text-align:center;

color:#ddd;

position:relative;

top:100px;

}

a{

color:#999;

text-decoration:none;

transition:0.2s;}

a:hover{

color:#ddd;}

#clock-wrap{

width:400px;

height:400px;

border:10px solid #fff;

border-radius:50%;

margin:80px auto 0;

position:relative;

box-shadow:0 0 40px rgba(0,0,0,1)}

#clock ul{

width:400px;

height:400px;

position:relative;

border-radius:50%;

background:radial-gradient(circle at center,#667eea,#764ba2);

box-shadow:0 0 50px rgba(0,0,0,0.5) inset; /*设置内阴影*/

}

#clock ul li{

position:absolute;

left:50%;

margin-left:-2px;

top:0;

width:4px;

height:10px;

background:rgba(255,255,255,.5);

transform-origin:center 200px; /*li的旋转中心点在圆形中间。*/

}

#clock li:nth-child(5n+1){ /*5个刻度为一组，每一组的第一个刻度要长一点。*/

height:18px;

}

#num{

position:absolute;

width:360px;

height:360px;

left:0;

right:0;

top:0;

bottom:0;

margin:auto;

}

#num li{

position:absolute;

left:50%;

margin-left:-10px;

top:0;

color:rgba(255,255,255,.5);

font:2em Arial, Helvetica, sans-serif;

transform-origin:center 180px;}

#hour,#min,#sec{

background:#fff;

position:absolute;

left:50%;

top:50%;

transform-origin:bottom; /*时针的旋转点在自己的底部。*/

box-shadow:0 0 6px rgba(0,0,0,.5)

}

#hour{

width:14px;

height:100px;

margin-left:-7px;

margin-top:-100px;

border-radius:3px;

}

#min{

width:10px;

height:150px;

margin-left:-5px;

margin-top:-150px;

border-radius:2px;

}

#sec{

width:4px;

height:180px;

margin-left:-2px;

margin-top:-180px;

border-radius:1px;

}

#circle{

width:40px;

height:40px;

border-radius:50%;

background:#fff;

position:absolute;

left:50%;

margin-left:-20px;

top:50%;

margin-top:-20px;

box-shadow:0 0 20px rgba(0,0,0,.4)}

</style>

    三、JavaScript代码

<script>

window.onload=function(){

var oList=document.getElementById("list");

var oCSS=document.getElementById("css"); //style标签也可以加id属性。

var aNums=document.getElementById("num").getElementsByTagName("li");

var oHour=document.getElementById("hour");

var oMin=document.getElementById("min");

var oSec=document.getElementById("sec");

var aLi="";

var sCSS="";

for(var i=0;i<60;i++){ //循环60次，产生刻度值和每一个刻度旋转的度数。

aLi+="<li></li>";

sCSS+="#clock li:nth-child("+(i+1)+"){transform:rotate("+i*6+"deg);}"

}

for(var i=0;i<12;i++){

sCSS+="#num li:nth-child("+(i+1)+"){transform:rotate("+i*30+"deg);}"

}

oList.innerHTML=aLi;

oCSS.innerHTML+=sCSS; //css需要追加到原来的css文档中。

myTime(); //初始化函数。

setInterval(myTime,1000);    //设置定时器，每隔1秒执行一次函数。

function myTime(){

var oDate=new Date();

var iSec=oDate.getSeconds();

//精确到秒数的分钟数。

var iMin=oDate.getMinutes()+iSec/60;

//精确到分秒的小时数。可以在旋转的时候更精确。

var iHour=oDate.getHours()+iMin/60;

oSec.style.transform="rotate("+iSec*6+"deg)" ;

oMin.style.transform="rotate("+iMin*6+"deg)";

oHour.style.transform="rotate("+iHour*30+"deg)"; //时针的指向需要把分钟和秒数算进去才精确。

}

}

</script>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!