纯 CSS 方式实现 CSS 动画的暂停与播放
来源:互联网 发布:欧宝闪电卡车数据 编辑:程序博客网 时间:2024/05/29 02:31
html代码:
<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 {
width: 100px;
height: 100px;
margin: 50px auto;
background: deeppink;
animation: move 2s linear infinite alternate;
}
input {
display: none;
}
@keyframes move {
0% {
transform: translate(-100px, 0);
}
100% {
transform: translate(100px, 0);
}
}
.btn {
width: 50px;
margin: 10px auto;
text-align: center;
border:1px solid #ddd;
padding: 10px;
border-radius: 5px;
cursor:pointer;
&:hover {
background: #ddd;
color: #333;
}
&:active {
background: #aaa;
}
}
#stop:checked ~ .animation {
animation-play-state: paused;
}
#play:checked ~ .animation {
animation-play-state: running;
}
- 纯 CSS 方式实现 CSS 动画的暂停与播放
- 纯CSS实现倒计时动画
- 纯CSS实现倒计时动画
- 纯css实现回旋动画
- 纯CSS实现小车动画
- CSS实现播放暂停按钮样式
- 如何实现平移动画的暂停与播放?
- 实现动画暂停播放
- JAVASCRIPT 控制动画的暂停与播放
- 动画的暂停与继续播放
- 纯css实现苹果表盘动画
- 纯css实现 页面加载动画
- 纯css实现波浪动画,超级简单
- 进度条动画(纯css)
- 不用图片纯css实现圆角的一种方式
- 用纯css实现下拉菜单的几种方式
- 纯CSS实现垂直水平居中的5种方式
- 用js+css实现帧动画播放的功能
- Spring MVC静态资源处理
- HDU 3401 + CDOJ 880 Trade + 生日礼物
- Mysql创建用户账号
- mysql忘记密码
- JS中的递归
- 纯 CSS 方式实现 CSS 动画的暂停与播放
- 欢迎使用CSDN-markdown编辑器
- python爬淘宝商品(个人测试使用,切勿用作商业用途)
- java缓存技术的介绍
- WINHTTP的API接口说明
- JavaScript数组
- JavaScript学习笔记24-对象的概念
- vba
- iBET Online Casino Lucky Draw Win Wu Bai 2017 Concert(iBET, iBET Lucky Draw, iBET Malaysia Lucky Dra