2019年-12月-04日
0
用CSS3制作时钟动画
CSS3经过发展，对浏览器的兼容性已经很不错了。它功能强大，很多页面特效可以代替JavaScript来实现了。下面就以CSS3来制作一个时钟动画。
浏览器最终效果图：
源代码放出：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
<style>
*{margin:0; padding:0;}
/*时钟边框*/
.box{
width:500px;
height:500px;
border:10px solid #ccc;
border-radius:50%;
position:relative;
margin:50px auto;
}
/*时钟数字*/
.box span{
position:absolute;
font-size:40px;
font-weight:700;
text-shadow:0 0 3px #000;
color:#fff;
}
.box .shu1{
top:5px;
left:50%;
transform:translateX(-50%);
}
.box .shu2{
right:12px;
top:50%;
transform:translateY(-50%);
}
.box .shu3{
bottom:5px;
left:50%;
transform:translateX(-50%);
}
.box .shu4{
left:12px;
top:50%;
transform:translateY(-50%);
}
/*时钟数字之间的短线*/
.box .line{
width:500px;
height:10px;
background:#ccc;
position:absolute;
top:50%;
}
.box .line1{
transform:translateY(-50%) rotate(-60deg);
}
.box .line2{
transform:translateY(-50%) rotate(-30deg);
}
.box .line3{
transform:translateY(-50%) rotate(30deg);
}
.box .line4{
transform:translateY(-50%) rotate(60deg);
}
/*覆盖在时钟上的白色背景*/
.box .bg{
width:450px;
height:450px;
background:#fff;
border-radius:50%;
position:absolute;
top:25px;
left:25px;
}
/*时分秒指针，与覆盖在上面的小圆*/
.box .shi,.box .fen,.box .miao{
width:15px;
height:100px;
background:#f00;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-100%);
transform-origin:center bottom;
}
.box .fen{
width:10px;
height:120px;
background:#0f0;
}
.box .miao{
width:5px;
height:150px;
background:#00f;
animation:miao 60s steps(60) infinite;/*秒针动画*/
}
@keyframes miao{
form{transform:translate(-50%,-100%) rotate(0deg)}
to{transform:translate(-50%,-100%) rotate(360deg)}
}
.box .yuan{
border:20px solid #00f;
border-radius:50%;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="bg"></div>
<span class="shu1">12</span>
<span class="shu2">3</span>
<span class="shu3">6</span>
<span class="shu4">9</span>
<div class="shi"></div>
<div class="fen"></div>
<div class="miao"></div>
<div class="yuan"></div>
</div>
</body>
</html>