简易的旋转图

最新推荐文章于 2024-08-05 14:56:36 发布

海忆

最新推荐文章于 2024-08-05 14:56:36 发布

阅读量193

点赞数

本文链接：https://blog.csdn.net/weixin_42161401/article/details/83177846

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			@-webkit-keyframes move{
				0%{
					-webkit-transform: rotate(0deg);
				}
				100%{
					-webkit-transform: rotate(360deg);
				}
			}
			
			.wrap{
				width: 100px;
				height: 100px;
				background: red;
				border-radius: 50%;
				text-align: center;
				line-height: 100px;
				-webkit-animation: 2s move infinite linear;
			}
			.q{
				width: 30px;
				height: 100px;
				background: #9ACD32;
				margin: 0 auto;
				border-radius: 50%;
			}
			.wrap:hover{
				-webkit-animation-play-state: paused;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="q"></div>
		</div>
	</body>
</html>