css3的animation大转盘写法

时间：7年前阅读：4690

alternate 动画会在厅数次数(1,3,5等等)正常播放，面在偶数次数（2，4，4）向后播放

<!DOCTYPE html>    
<html lang="en">    
<head>    
	<meta charset="UTF-8">    
	<title>Document</title>    
	<style type="text/css">    
	*{    
		padding: 0;    
		margin: 0;    
	}    
	#herhr{    
		display: block;    
		margin: 10px auto;    
		border: 1px solid blue;    
		/*transform: rotate(60deg);   infinite让它一直转*/    
		/*animation: hger  10s linear infinite;*/    
		/*alternate 动画会在厅数次数(1,3,5等等)正常播放，面在偶数次数（2，4，4）向后播放。*/    
		/*animation: hger  5s linear infinite alternate;*/    
		animation: hger  10s linear infinite;    
		/*给图片加个圆角*/    
		border-radius: 60%;    
	}    
#herhr:hover{    
	/*play 游戏    state  规定   paused  暂停  当鼠标放在转盘的时候暂停的意思*/    
	animation-play-state: paused;    
}    
	@keyframes hger{    
		from{    
			transform: rotate(0deg);    
		}    
		to{    
			transform: rotate(360deg);    
		}    
	}    
	</style>    
</head>    
<body>    
	<img id="herhr" src="https://www.qiquanji.com/data/img/dmj/201903091552104923184182.jpg" alt="">    
</body>    
</html>

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

微信扫码关注

更新实时通知

css3的animation大转盘写法

网友评论