【HTML5】网页实用技巧2：设置动画自动循环播放，鼠标移上去，停止动画播放

最新推荐文章于 2023-07-31 09:23:58 发布

逍遥小丸子

最新推荐文章于 2023-07-31 09:23:58 发布

阅读量4.4k

点赞数 3

分类专栏： HTML+CSS网页设计

本文链接：https://blog.csdn.net/dnruanjian/article/details/110948644

版权

HTML+CSS网页设计专栏收录该内容

43 篇文章 149 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用HTML5和CSS3实现圆形图片的旋转动画，并通过鼠标悬停控制动画的播放与暂停。关键知识点涉及@keyframes、animation属性以及animation-play-state属性的应用。

摘要由CSDN通过智能技术生成

需要实现的效果：圆形图片，一直执行旋转的动画，鼠标移上去时，动画停止

实现思路：

①制作一个圆形图片，制作步骤参照：圆形图片的制作

②创建动画，关键内容：@keyframes 的使用

③给图片使用动画，关键属性：animation 属性的使用

④给图片添加 hover 伪类选择器，鼠标移上去时，动画停止，关键属性 animation-play-state:paused;

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片旋转-王迪</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				overflow:hidden;			
			}
			div img{
				width: 100%;
				height: 100%;
				animation: xuanzhuan 3s infinite linear;
				/*xuanzhuan:动画名称;
				3s:动画播放时间;
				infinite:循环播放动画;
				linear:匀速播放*/
			}
			@keyframes xuanzhuan{
				from{ transform: rotate(0deg);}
				to{ transform: rotate(360deg);}
			}
			div img:hover{
				 animation-play-state:paused ;/*设置动画播放状态:停止*/
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/6.jpg" />
		</div>
	</body>
</html>

案例延伸：图片默认静止，鼠标移上去开始播放动画，鼠标离开，动画停止

实现思路：

①设置元素的动画播放状态为停止

②给元素添加 hover 伪类选择器，鼠标放上去时，设置动画播放状态为开始。

关键知识点：animation-play-state 属性

语法：animation-play-state: paused|running;

paused ：规定动画已暂停。
running ：规定动画正在播放。

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片旋转-王迪</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				overflow:hidden;
				margin: 20px auto;				
			}
			div img{
				width: 100%;
				height: 100%;
				animation: xuanzhuan 3s infinite linear;				
				/*xuanzhuan:动画名称;
				3s:动画播放时间;
				infinite:循环播放动画;
				linear:匀速播放*/
                animation-play-state:paused;/*设置动画播放状态:暂停*/
			}
			@keyframes xuanzhuan{
				from{ transform: rotate(0deg);}
				to{ transform: rotate(360deg);}
			}
			div img:hover{
				 animation-play-state:running ;/*设置动画播放状态:开始*/
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/6.jpg" />
		</div>
	</body>
</html>

============这里是结束分割线===============