动画可以暂停animation-play-state
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.play-state {
width: 100px;
height: 100px;
margin: 40px;
text-align: center;
line-height: 94px;
border: 3px solid #e1efde;
border-radius: 50%;
animation: play-state 3s linear infinite;
cursor: pointer;
}
.play-state:hover {
animation-play-state: paused;
} @keyframes play-state {
0% {
margin-left: 0;
}
100% {
margin-left: 200px;
}
}
</style>
</head>
<body>
<div class="play-state">暂停</div>
</body>
</html>
<script> </script>
动画可以暂停animation-play-state的更多相关文章
- 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- iOS之核心动画（Core Animation）
Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能. Core ...
- css 动画 transform transition animation
1.transform transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...
- CSS动画效果之animation
Y(^o^)Y css动画大乱弹之animation. 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中, ...
- CALayer动画的暂停,恢复,以及结束时候的回调
CALayer动画的暂停,恢复,以及结束时候的回调 源码如下: // // ViewController.m // AnimationLineView // // Created by YouXian ...
- Android（java）学习笔记263：Android下的属性动画（Property Animation）
1. 属性动画(Property Animation)引入: 在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系统在一开始的时候就给我们提供了两种实现动画效果的方式,逐帧动画(fra ...
- Android 属性动画（Property Animation） 全然解析 （下）
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38092093 上一篇Android 属性动画(Property Animatio ...
- Android 属性动画（Property Animation） 完全解析 （下）
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38092093 上一篇Android 属性动画(Property Animatio ...
- CALayer的上动画的暂停和恢复
CHENYILONG Blog CALayer上动画的暂停和恢复 #pragma mark 暂停CALayer的动画-(void)pauseLayer:(CALayer*)layer{CFTimeIn ...
随机推荐
- 可决系数R^2和方差膨胀因子VIF
然而很多时候,被筛选的特征在模型上线的预测效果并不理想,究其原因可能是由于特征筛选的偏差. 但还有一个显著的因素,就是选取特征之间之间可能存在高度的多重共线性,导致模型对测试集预测能力不佳. 为了在筛 ...
- c++ printf和cout的性能
今天做了一道编程题,仔细检查了算法并没有错误,但是结果显示时间超时,但仍有80%的案例通过了,很奇怪. 通过将cin换成scanf,cout换成printf结果AC,实验发现二者性能差了很多,在输出1 ...
- Day_03-函数和模块的使用
使用函数求阶乘 使用while循环的代码: m = float(input('m = ')) n = float(input('n = ')) mn = m - n fm = 1 while m != ...
- 微信小程序 上拉刷新/下拉加载
小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式 onPullDownR ...
- Bellman-ford算法、SPFA算法求解最短路模板
Bellman-ford 算法适用于含有负权边的最短路求解,复杂度是O( VE ),其原理是依次对每条边进行松弛操作,重复这个操作E-1次后则一定得到最短路,如果还能继续松弛,则有负环.这是因为最长的 ...
- #1122 JSP动作元素
JSP动作元素 与JSP指令元素不同的是,JSP动作元素在请求处理阶段起作用.JSP动作元素是用XML语法写成的. 利用JSP动作可以动态地插入文件.重用JavaBean组件.把用户重定向到另外的页面 ...
- Oracle Like子句
Oracle Like子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,您将学习如何使用Oracle LIKE运算符来测试列中的值是否与指定 ...
- uploadify上传插件参数的一些设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- es之IK分词器
1:默认的分析器-- standard 使用默认的分词器 curl -XGET 'http://hadoop01:9200/_analyze?pretty&analyzer=standard' ...
- Mysql中主键与索引
摘自: https://www.cnblogs.com/wicub/p/5898286.html 一.什么是索引?索引用来快速地寻找那些具有特定值的记录,所有MySQL索引都以B-树的形式保存.如果没 ...