html5css3动画小小demo旋转的盒子

最新推荐文章于 2023-04-08 10:30:19 发布

原创最新推荐文章于 2023-04-08 10:30:19 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用CSS实现的无限旋转图片效果，并且当鼠标悬停在图片上时，旋转会暂停。通过简单的HTML结构和CSS样式定义，实现了动态的视觉效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>旋转的盒子</title>
		<style type="text/css">
			img{
				animation:go 2s linear infinite;
				display:block;
				margin:100px auto;
			}
			@keyframes go{
				from{
					transform:rotate(0deg);
				}
				to{
					transform:rotate(360deg);
				}
			}
			img:hover{
				animation-play-state:paused;
			}
		</style>
	</head>
	<body>
		<img src="img/zhuan.jpg" width="600px;"/>
	</body>
</html>