HTML+CSS入门有趣的CSS题目之纯 CSS 方式实现 CSS 动画的暂停与播放!
阿萨 2018-03-20 来源 :网络 阅读 704 评论 0

摘要:开本HTML+CSS入门系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。

开本HTML+CSS入门系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。


使用纯 CSS 的方法,能否暂停、播放 CSS 动画?看起来不可能,至少很麻烦。

我们知道,在 CSS3 animation 中,有这样一个属性可以暂停、播放动画:


{

    animation-play-state: paused | running;

}

animation-play-state: 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外,它的值可以被设置为暂停和恢复的动画的重放。

如果借助 Javascript,我们可以实现控制 CSS 动画的运行和播放,下面列出部分关键代码:

XHTML

<div class="btn">stop</div>

<div class="animation"></div>

<style>

.animation {

    animation: move 2s linear infinite alternate;

}

@keyframes move {

    0% {

        transform: translate(-100px, 0);

    }

    100% {

        transform: translate(100px, 0);

    }

}

</style>

document.querySelector('.btn').addEventListener('click', function() {

    let btn = document.querySelector('.btn');

    let elem = document.querySelector('.animation');

    let state = elem.style['animationPlayState'];

    

    if(state === 'paused') {

        elem.style['animationPlayState'] = 'running';

        btn.innerText = 'stop';

    } else {

        elem.style['animationPlayState'] = 'paused';

        btn.innerText = 'play';

    }

    

});


纯 CSS 实现

下面我们探讨下,使用纯 CSS 的方式能否实现。

hover 伪类实现

使用 hover 伪类,在鼠标悬停在按钮上面时,控制动画样式的暂停。

关键代码如下:

XHTML

<div class="btn stop">stop</div>

<div class="animation"></div>

<style>

.stop:hover ~ .animation {

    animation-play-state: paused;

}

</style>


当然,这个方法不够智能,如果释放鼠标的自由,点击一下暂停、再点击一下播放就好了。还有其他方法吗?

checked 伪类实现

之前的文章《有趣的CSS题目(8):纯CSS的导航栏Tab切换方案》也谈过,使用 radio 标签的 checked 伪类,加上  实现纯 CSS 捕获点击事情。

并且利用被点击的元素可以控制一些 CSS 样式。实现如下:

XHTML

<input id="stop" type="radio" name="playAnimation" />

<input id="play" type="radio" name="playAnimation" />

<div class="box">

    <label for="stop">

        <div class="btn">stop</div>

    </label>

    <label for="play">

        <div class="btn">play</div>

    </label>

</div>

<div class="animation"></div>

部分关键 CSS 代码:

.animation {

    animation: move 2s linear infinite alternate;

}

 

#stop:checked ~ .animation {

    animation-play-state: paused;

}

 

#play:checked ~ .animation {

    animation-play-state: running;

}

我们希望当 #stop 和 #play 两个 radio 被点击时,给 .animation 元素分别赋予 animation-play-state: paused 或是 animation-play-state: running 。而且二者只能生效其一,所以需要给两个 radio 标签赋予相同的 name 属性。

DEMO — 纯 CSS 方式实现 CSS 动画的暂停与播放:

上面的示例 Demo 中,实现了纯 CSS 方式实现 CSS 动画的暂停与播放。

当然,还有一些其他方法,例如 radio 替换成 checkbox ,或者使用 :target 伪类选择器也能实现上面同样的效果,感兴趣的可以尝试一下。

希望这篇文章可以帮助到你。总之,同学们,你想要的职坐标IT频道都能找到!


本文由 @阿萨 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程