用CSS怎样制作唱片动画暂停并维持成效

今天小编跟大家讲解下有关“用CSS怎样制作唱片动画暂停并维持效果”的内容 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。

我曾经遇到过一个难题. 我需要让一个摆动的房子从塔吊上落下,但点击落下途中,房子需要维持落下瞬间摆动的角度. 当时把我难坏了,刚开始我希望能获取到房子当前摆动的角度,并且在下落的瞬间赋值给房子的transform:rotate(),但这是实在是太麻烦了,不会是最优解.

但其实只要一个属性就能解决这个问题.

animation-play-state

一、仅用CSS

使用该属性使一段动画在其运动周期中暂停.,并且下次开始时直接从当前这一帧开始. 这是一个动画属性,它对animation属性生效, 你既可以在CSS中使用它,也可以在JS中使用它,同样的方便,至少…比获取角度再赋值好到不知道哪里去.

.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;

}

以上就是关于“用CSS怎样制作唱片动画暂停并维持效果”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，小编每天都会为大家更新不同的知识。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!