JavaScript实现动画计时器代码！！！

来源：互联网发布：淘宝网售假违规节点编辑：程序博客网时间：2024/05/16 09:21

<!doctype html>
<html>
<head>
<title>计时器特效</title>
<style type="text/css">

.outborder{
width:200px;height:400px;float:left;
}
.leftup{
background-color:#00d;width:20px;height:120px;
position:relative;top:10px;left:0px;
-webkit-animation:cleftup 20s linear infinite;
}
.up{
background-color:#00d;width:120px;height:20px;
position:relative;top:-120px;left:10px;
-webkit-animation:cup 20s linear infinite;

}
.rightup{
background-color:#00d;width:20px;height:120px;
position:relative;top:-130px;left:120px;
-webkit-animation:crightup 20s linear infinite;
}
.middle{
background-color:#00d;width:120px;height:20px;
position:relative;top:-150px;left:10px;
-webkit-animation:cmiddle 20s linear infinite;
}
.leftdown{
background-color:#00d;width:20px;height:120px;
position:relative;top:-160px;left:0px;
-webkit-animation:cleftdown 20s linear infinite;
}
.rightdown{
background-color:#00d;width:20px;height:120px;
position:relative;top:-280px;left:120px;
-webkit-animation:crightdown 20s linear infinite;
}
.down{
background-color:#00d;width:120px;height:20px;
position:relative;top:-300px;left:10px;
-webkit-animation:cdown 20s linear infinite;
}

@-webkit-keyframes cleftup{
0%{background-color:#00f;}
2%{background-color:#fff;}
10%{background-color:#fff;}
20%{background-color:#fff;}
30%{background-color:#fff;}
32%{background-color:#00f;}
40%{background-color:#00f;}
50%{background-color:#00f;}
60%{background-color:#00f;}
62%{background-color:#fff;}
70%{background-color:#fff;}
72%{background-color:#00f;}
80%{background-color:#00f;}
90%{background-color:#00f;}
100%{background-color:#00f;}

}

@-webkit-keyframes cup{
0%{background-color:#00f;}
2%{background-color:#fff;}
10%{background-color:#fff;}
12%{background-color:#00f;}
20%{background-color:#00f;}
30%{background-color:#00f;}
32%{background-color:#fff;}
40%{background-color:#fff;}
42%{background-color:#00f;}
50%{background-color:#00f;}
60%{background-color:#00f;}
70%{background-color:#00f;}
80%{background-color:#00f;}
90%{background-color:#00f;}
100%{background-color:#00f;}
}
@-webkit-keyframes crightup{
0%{background-color:#00f;}
10%{background-color:#00f;}
20%{background-color:#00f;}
30%{background-color:#00f;}
40%{background-color:#00f;}
42%{background-color:#fff;}
50%{background-color:#fff;}
60%{background-color:#fff;}
62%{background-color:#00f;}
70%{background-color:#00f;}
80%{background-color:#00f;}
90%{background-color:#00f;}
100%{background-color:#00f;}
}
@-webkit-keyframes cmiddle{
0%{background-color:#fff;}
10%{background-color:#fff;}
12%{background-color:#00f;}
20%{background-color:#00f;}
30%{background-color:#00f;}
40%{background-color:#00f;}
50%{background-color:#00f;}
60%{background-color:#00f;}
62%{background-color:#fff;}
70%{background-color:#fff;}
72%{background-color:#00f;}
80%{background-color:#00f;}
90%{background-color:#00f;}
92%{background-color:#fff;}
100%{background-color:#fff;}
}
@-webkit-keyframes cleftdown{
0%{background-color:#00f;}
2%{background-color:#fff;}
10%{background-color:#fff;}
12%{background-color:#00f;}
20%{background-color:#00f;}
22%{background-color:#fff;}
30%{background-color:#fff;}
40%{background-color:#fff;}
50%{background-color:#fff;}
52%{background-color:#00f;}
60%{background-color:#00f;}
62%{background-color:#fff;}
70%{background-color:#fff;}
72%{background-color:#00f;}
80%{background-color:#00f;}
82%{background-color:#fff;}
90%{background-color:#fff;}
92%{background-color:#00f;}
100%{background-color:#00f;}
}
@-webkit-keyframes crightdown{
0%{background-color:#00f;}
10%{background-color:#00f;}
12%{background-color:#fff;}
20%{background-color:#fff;}
22%{background-color:#00f;}
30%{background-color:#00f;}
40%{background-color:#00f;}
50%{background-color:#00f;}
60%{background-color:#00f;}
70%{background-color:#00f;}
80%{background-color:#00f;}
90%{background-color:#00f;}
100%{background-color:#00f;}
}
@-webkit-keyframes cdown{
0%{background-color:#00f;}
2%{background-color:#fff;}
10%{background-color:#fff;}
12%{background-color:#00f;}
20%{background-color:#00f;}
30%{background-color:#00f;}
32%{background-color:#fff;}
40%{background-color:#fff;}
42%{background-color:#00f;}
50%{background-color:#00f;}
60%{background-color:#00f;}
62%{background-color:#fff;}
70%{background-color:#fff;}
72%{background-color:#00f;}
80%{background-color:#00f;}
90%{background-color:#00f;}
100%{background-color:#00f;}
}

</style>
</head>

<body>
<div style="width:1030px;">
<div id="hour10" class="outborder">
<div class="leftup"></div>
<div class="up"></div>
<div class="rightup"></div>
<div class="middle"></div>
<div class="leftdown"></div>
<div class="rightdown"></div>
<div class="down"></div>
</div>
<div id="hour1" class="outborder">
<div class="leftup"></div>
<div class="up"></div>
<div class="rightup"></div>
<div class="middle"></div>
<div class="leftdown"></div>
<div class="rightdown"></div>
<div class="down"></div>
</div>
<div class="outborder"></div>
<div id="min10" class="outborder">
<div class="leftup"></div>
<div class="up"></div>
<div class="rightup"></div>
<div class="middle"></div>
<div class="leftdown"></div>
<div class="rightdown"></div>
<div class="down"></div>
</div>
<div id="min1" class="outborder">
<div class="leftup"></div>
<div class="up"></div>
<div class="rightup"></div>
<div class="middle"></div>
<div class="leftdown"></div>
<div class="rightdown"></div>
<div class="down"></div>
</div>
</div>
</body>

</html>

0 0