CSS3制作时钟案例animation练习

效果展示：
CSS3制作时钟案例animation练习
思路：
1.最外层的灰色圆圈是一个div，利用border-radius: 50%;设成圆形。

2.圆圈四周的时刻是六个div经过旋转所得。

3.设一个覆盖层，将中间部分覆盖，便可将矩形变成时刻形状。

4.利用定位和transform,添加时针分针秒针。
CSS3制作时钟案例animation练习
5.使针转动，利用动画
animation:zhuan 43200s linear infinite;
大功告成。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>时钟</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.clock {
			width: 300px;
			height: 300px;
			border-radius: 50%;
			margin: 100px auto;
			position: relative;
			border:8px solid #ccc;
		}
		.line {
			width: 8px;
			height: 100%;
			background: #ccc;
			position: absolute;
			left:50%;
			transform:translateX(-50%);
		}
		.one {
			transform:translateX(-50%) rotate(30deg);
		}
		.two {
			transform:translateX(-50%) rotate(60deg);
		}
		.three {
			transform:translateX(-50%) rotate(90deg);
		}
		.four {
			transform:translateX(-50%) rotate(120deg);
		}
		.five {
			transform:translateX(-50%) rotate(150deg);
		}
		.six {
			transform:translateX(-50%) rotate(180deg);
		}
		.cover {
			width: 250px;
			height: 250px;
			background: #fff;
			position: absolute;
			border-radius: 50%;
			top: 50%;
			left:50%;
			transform:translate(-50%,-50%);
		}
		.hours,.mins,.seconds {
			position: absolute;
			top: 50%;
			left:50%;
			transform:translate(-50%,-100%);
			transform-origin:center bottom;
		}
		.hours {
			width: 6px;
			height: 50px;
			background: red;
			animation:zhuan 43200s linear infinite;
		}
		.mins {
			width: 5px;
			background: skyblue;
			height: 60px;
			animation:zhuan 3600s linear infinite;
		}
		.seconds {
			width: 3px;
			height: 80px;
			background: yellow;
			animation:zhuan 60s infinite steps(60);
		}
		.center {
			width: 20px;
			height: 20px;
			background: #ccc;
			position: absolute;
			top: 50%;
			left:50%;
			transform:translate(-50%,-50%);
			border-radius: 50%;	
		}
		@keyframes zhuan{
			from{
				transform:translate(-50%,-100%) rotate(0);
			}
			to {
				transform:translate(-50%,-100%) rotate(360deg);
			}
		}
	</style>
</head>
<body>
	<div class="clock">
		<div class="line one"></div>
		<div class="line two"></div>
		<div class="line three"></div>
		<div class="line four"></div>
		<div class="line five"></div>
		<div class="line six"></div>
		<div class="cover"></div>
		<div class="hours"></div>
		<div class="mins"></div>
		<div class="seconds"></div>
		<div class="center"></div>
	</div>
</body>
</html>

CSS3制作时钟案例animation练习

相关推荐