漂亮的时钟秒针旋转效果

时间：5年前阅读：5733

设置旋转参考点 origin原点，起点。图片默认旋转的中心点在图片的中间，要改变指针从尾部开始水平方向0%，垂直方向50% 写像素也可以

<!DOCTYPE html>    
<html lang="en">    
<head>    
	<meta charset="UTF-8">    
	<title>Document</title>    
	<style type="text/css">    
	*{    
		padding: 0;    
		margin: 0;    
	}    
	body{    
		color: #6C6C6C;    
	}    
	#uert{    
		width: 500px;    
		height: 500px;    
		border: 1px solid blue;    
		margin: 50px auto;    
		background: url(https://www.qiquanji.com/data/img/dmj/201903091552105406154468.jpg) no-repeat ;    
		/*background-size: 530px 530px;*/    
		background-size: 100% 100% ;    
		position: relative;    
		/*加阴影*/    
		box-shadow: 10px 10px 10px rgba(0,0,0,0.4);    
		border-radius: 50%;    
	}    
	#uert img{    
	position: absolute;    
	left: 240px;    
	top: 240px;    
	display: block;    
	width: 200px;    
	height: 50px;    
	animation: ujt 5s linear infinite;    
	/*origin原点，起点;*/    
	transform-origin: 10% 50%;    
	}    
	@keyframes ujt{    
		from{    
			transform: rotate(0deg);    
		}    
		to{    
			transform: rotate(360deg);    
		}    
	}    
	</style>    
</head>    
<body>    
	<div id="uert">    
	<img src="https://www.qiquanji.com/data/img/dmj/201903091552105405100741.jpg" alt="">    
	</div>    
</body>    
</html>

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

微信扫码关注

更新实时通知

漂亮的时钟秒针旋转效果

网友评论