如何简单使用纯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);
	}
}

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值