如何简单使用纯CSS3模仿时钟的指针转动

开发工具与关键技术：DW html css3
作者：Mr_肖先生
撰写时间：2019年1月16日

首先我们简单的写好html需要用到的div盒子以及嵌套的内容，代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯css3模仿时钟时针转动</title>
	<link rel="stylesheet" href="css/animation.css">
</head>
<body>
	<div class="box1">
		<div class="box2">
			<div class="box3"><a href="#" class="gt">&gt;</a></div>
			<div class="box4"><a href="#" class="lt">&lt;</a></div>
		</div>
	</div>
</body>	
</html>

然后我们再对这些html布局写一下基本的css样式
1.我们给div设置宽、高、背景颜色等样式，再把它们position定位到想要的位置
2.给想要转动的盒子设置一个transform-origin,这是一句设置原点的代码
3.其中的核心是@keyframes（关键帧） animation这是一句创建一个动画的代码，创建完之后当然还要调用才可以实现动画效果
4.我们在想要转动的盒子里调用这个动画函数的代码，设置animation的子属性
5.关于animation的子属性有：
animation:animation-name;(调用动画)
animation-duration (动画播放时间)
animation-timing-function (动画播放方式)
animation-delay (动画开始播放时间)
animation-iteration-count （动画播放次数）
两个参数值：infinite(无限次)；n(具体次数)

*{
	margin:50px auto;
}
.box1{
	width: 300px;
	height: 300px;
	background: purple;
	position: relative;
	border-radius: 50%;
}
.box2{
	width: 5px;
	height: 5px;
	background: #fff;
	position: absolute;
	top: 100px;
	left: 145px;
	border-radius: 5px;
}
.box3{
	width: 100px;
	position: absolute;
	top: -48px;
	right: -98px;
	border-top: 1px solid #fff;
	transform-origin: left top;
	animation: animation 3600s linear infinite;	
}
.box4{
	width: 120px;
	position: absolute;
	top: -48px;
	right: 3px;
	border-top: 1px solid #fff;
	transform-origin: right top;
	animation: animation 60s linear infinite;
}
.lt{
	position: absolute;
	top: -62px;
	left: -5px;
	text-decoration-line: none;
	color: #fff;
}
.gt{
	position: absolute;
	top: -62px;
	right: -5px;
	text-decoration-line: none;
	color: #fff;
}
@keyframes animation{
	0%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(360deg);
	}
}

这样，一个简单模仿的时针转动就完成了！

如何简单使用纯CSS3模仿时钟的指针转动

猜你喜欢