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

作者：weixin_40725706 | 2024-07-09 22:10:55

踩

html动画怎么zant

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

实现思路：

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

②创建动画，关键内容：@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>

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/803850