用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>

看完该文章有什么感受？