最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS动画中途停止并维持姿态代码实例
时间:2021-09-26 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下CSS动画中途停止并维持姿态代码实例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
一、仅用CSS
使用该属性使一段动画在其运动周期中暂停.,并且下次开始时直接从当前这一帧开始. 这是一个动画属性,它对animation属性生效, 你既可以在CSS中使用它,也可以在JS中使用它,同样的方便,至少…比获取角度再赋值好到不知道哪里去.
css;">.xxx { animation-play-state: paused; //该属性一旦被添加,CSS动画会立即暂停,并且保持于当前帧 } .xxx { animation-play-state: running; //该属性一旦被添加,CSS动画会立即从当前帧开始运作; }
你可以给一个页面元素添加一个animation,然后设置当hover状态时加上
animation-play-state:paused
动画就会在你鼠标追上那个元素时停止.
二、仅用JS
//i等于1时媒体播放并且音符飘动,i等于0时媒体暂停音符暂停. if (i == 1) { right.style.animationPlayState = "paused" audio.pause(); i = 0; } else { right.style.animationPlayState = "running"; audio.play(); i = 1; }
-
上一个: Canvas绘制像素风图片代码示例
-
下一个: css边框添加四个角实现代码
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26
- css复合选择器的具体使用方法介绍 10-26
- css三列自适应布局教程 10-26