【HTML5】网页实用技巧2：设置动画自动循环播放，鼠标移上去，停止动画播放 |
您所在的位置：网站首页 › html动画循环播放 › 【HTML5】网页实用技巧2：设置动画自动循环播放，鼠标移上去，停止动画播放 |
【HTML5】网页实用技巧2：设置动画自动循环播放，鼠标移上去，停止动画播放
|
需要实现的效果：圆形图片，一直执行旋转的动画，鼠标移上去时，动画停止
①制作一个圆形图片，制作步骤参照：圆形图片的制作 ②创建动画，关键内容：@keyframes 的使用 ③给图片使用动画，关键属性：animation 属性的使用 ④给图片添加 hover 伪类选择器，鼠标移上去时，动画停止，关键属性 animation-play-state:paused; 实现代码： 图片旋转-王迪 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 ;/*设置动画播放状态:停止*/ } 
案例延伸：图片默认静止，鼠标移上去开始播放动画，鼠标离开，动画停止
①设置元素的动画播放状态为停止 ②给元素添加 hover 伪类选择器，鼠标放上去时，设置动画播放状态为 开始。 关键知识点：animation-play-state 属性语法：animation-play-state: paused|running; paused ：规定动画已暂停。running ：规定动画正在播放。实现代码： 图片旋转-王迪 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 ;/*设置动画播放状态:开始*/ }
============这里是结束分割线===============
|
【本文地址】
今日新闻 |
推荐新闻 |