css3实现圆周运动效果

时间：5年前阅读：5481

css3新增了transform和animation等新的样式，也可以用来做圆周运动。transform里面有一个变形函数是rotate，这时就需要使用逆向思维。元素本身并不发生运动，而是轨道自身在旋转，会实现视觉上的圆周运动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    <title></title>
<style>
	body {
    		margin-top: 100px;
    	}
@keyframes rotate1{
    100%{transform:rotate(360deg);}
}
@keyframes rotate2{
    100%{transform:rotate(-360deg);}
}
#backup{
    height: 298px;width:298px;border:1px solid black;border-radius:50%;position:absolute;top:180px;left:50px;
}
#test{
    height: 40px;width: 40px;background-color:darkcyan;position:relative;left:130px;top:280px;border-radius:50%
}
</style>
</head>
<body>
<button id="btn1">顺时针旋转</button>
<button id="btn2">逆时针旋转</button>
<button id="btn3">暂停</button>
<button id="reset">还原</button>
<div id="result"></div>
<div id="backup">
    <div id="test"></div>
</div>
<script>
reset.onclick = function(){
    history.go();
}
btn1.onclick = function(){
    backup.style.animation= 'rotate1 4s infinite linear';
}
btn2.onclick = function(){
    backup.style.animation= 'rotate2 4s infinite linear';
}
btn3.onclick = function(){
    backup.style.animationPlayState = 'paused';
}
</script>
</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

​css3实现圆周运动效果

网友评论

css3实现圆周运动效果