CSS 操⊙﹏⊙纵动漫播发与中止的小窍门(十分好用

2021-01-20 23:26 jianzhan

今日要详细介绍一种非常简单的应用 CSS 操纵动漫播发与中止的小窍门。 应用好啦,能够在许多具体情景足以应用。

大家先看来个案子,本事例就是我在游逛 Codepen 时见到了,很有趣:

本事例,CodePen:  https://codepen.io/mikegolus/pen/jJzRwJ   

上边全部全过程全是由 CSS 进行。撇开怎样用 CSS 完成所述一些 UI 实际效果。文中关键讲的是怎样仅用 CSS 操纵一次动漫的行驶,中止与刚开始。

拆卸剖析要求

所述动漫操纵要进行的实际效果是:

  1. 网页页面 render 后,无一切实际操作,动漫不容易刚开始。仅有当电脑鼠标对原素开展  click  ,开启原素的  :active  伪类实际效果的情况下,动漫才刚开始开展;
  2. 动漫开展到随意時刻,电脑鼠标终止点一下,则动漫终止;
  3. 再次对原素开展点一下,动漫再次从上一帧完毕的情况刚开始
  4. 假如动漫播发完,点一下击不容易反复播发,动漫情况保存在动漫的最终一帧

处理要求

看见仿佛挺繁杂的,实际上完成起來非常容易,关键依靠了伪类  :active  与动漫的播发情况  animation-play-state  。

大家以一个健身运动的圆球做一个简易的实例,圆球从左健身运动到右。

<div></div>
div {
    margin: 50px auto;
    width: 100px;
    height: 100px;
    background: #000;
    animation: move 1s linear;
    animation-fill-mode: forwards;
}

@keyframes move {
    100% {
        transform: translate(200px, 0) rotate(180deg);
    }
}

接下去,大家就开展简易的更新改造,动漫的默认设置情况是中止的:

div {
    margin: 50px auto;
    width: 100px;
    height: 100px;
    background: #000;
    animation: move 1s linear;
    animation-fill-mode: forwards;
+   animation-play-state: paused;
}

仅有根据点一下的情况下,动漫才会运作:

body:active div {
    animation-play-state: running;
}

看一下实际效果,以便便捷认清点一下的全过程,在点一下的全过程中,因为我改了下情况色调(情况掉色表明当今电脑鼠标按住):

CodePen Demo: https://codepen.io/Chokcoco/pen/XGvwjL

小结一下

嗯,全部全过程实际上十分简易。了解了这类方式后,便可以随便加到你要的一切动漫中,再抛一个相近的 Demo:

CodePen Demo: https://codepen.io/Chokcoco/pen/ZPgxwy

十分有效的一个小窍门,赶快 GET 起來。

到此这篇有关CSS 操纵动漫播发与中止的小窍门(十分好用)的文章内容就详细介绍到这了,大量有关CSS 操纵动漫播发与中止內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!