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

冷不防 2022-12-27 09:24 631阅读 0赞

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

![20201210105741218.gif][]

# 实现思路： #

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

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

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

![20201210112041647.gif][]

# 实现思路： #

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

②给元素添加 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>

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

[20201210105741218.gif]: /images/20221120/3498de22228e4d5fb3be38f3bfc90bcc.png
[Link 1]: https://blog.csdn.net/dnruanjian/article/details/110946953
[20201210112041647.gif]: /images/20221120/3493da8bfaef4431bffe8b7a4df8f288.png