html 中数字一直往上加的动态效果,CSS动画：数字增量效果
使用CSS3动画绝对可以实现数字旋转效果,你还可以使用一小部分JS来设置终点并实际获得整个功能.
方法说明：
>创建一个div,通过将其高度和宽度设置为1em,它始终只显示一个数字. div的溢出设置为隐藏,以便只显示一行.
>在此div中,创建一个包含1到0之间所有数字的范围,并相对于父级定位.
>跨度的初始位置为0px或0em,但在动画期间,顶部位置会发生变化,因此跨度会给人以向上移动的印象.因为div一次只能显示一个数字,所以它会产生旋转效果(或其他数字的效果消失).
>通过为每个量程元素设置固定的顶部位置来实现最终位置. 0em表示第1行可见(编号1),-2em表示第3行可见(编号3),依此类推.
>增加或减少动画持续时间将使旋转效果快速或缓慢地发生.动画迭代计数设置为5,以产生微调器旋转多次的错觉.
注意：使用这种方法,旋转看起来像每次都是整个圆圈而不是像问题的JSBin样本那样,第一个数字的3到4只是一个步骤,而不是一个完整的圆圈.
div {
width: 1em;
height: 1em;
overflow: hidden;
line-height: 1em;
display: inline-block;
}
span {
position: relative;
}
.animate {
-webkit-animation: spinit 0.2s 5;
-moz-animation: spinit 0.2s 5;
animation: spinit 0.2s 5;
}
@-webkit-keyframes spinit {
0% {
top: 0em;
}
50% {
top: -5em;
}
100% {
top: -9em;
}
}
@-moz-keyframes spinit {
0% {
top: 0em;
}
50% {
top: -5em;
}
100% {
top: -9em;
}
}
@keyframes spinit {
0% {
top: 0em;
}
50% {
top: -5em;
}
100% {
top: -9em;
}
}
/* Setting the required value to top will make the spinner end at that number */
#digit1 {
top: -4em;
/* -4em means 5 will be the number */
}
#digit2 {
top: -2em;
}
#digit3 {
top: 0em;
}
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
下面是一个使用JavaScript的示例,其中动画效果通过CSS实现,但动画的触发和端点的设置是使用JavaScript实现的.
JS代码几乎是自我解释的.我们所做的就是以下内容：
>为按钮的click事件创建一个侦听器,在其中我们将animate类添加到属于此动画效果的所有span元素中.这是因为我们希望动画仅在单击按钮时发生.
>当动画结束(或旋转完成)时,我们将每个跨度的top属性设置为某个随机数.这意味着每个跨度将显示不同的数字.
>在动画结束时,我们还调用另一个函数来删除动画类,这样当我们再次单击该按钮时,动画可以重新开始.
window.onload = function() {
var spinner = document.getElementById('spinner');
spinner.onclick = spinit;
var el = document.querySelectorAll("span[id*=digit]");
for (i = 0; i < el.length; i++) {
el[i].addEventListener("animationend",randomize,false);
el[i].addEventListener("webkitAnimationEnd",false);
el[i].addEventListener("oanimationend",false);
el[i].addEventListener("MSAnimationEnd",false);
}
}
function randomize() {
var rand = Math.floor(Math.random() * 9);
this.style.top = -1 * rand + "em";
this.classList.toggle('animate');
}
function spinit() {
var el = document.querySelectorAll("span[id*=digit]");
for (i = 0; i < el.length; i++) {
el[i].classList.toggle('animate');
}
}
div {
width: 1em;
height: 1em;
overflow: hidden;
line-height: 1em;
display: inline-block;
}
span {
position: relative;
}
.animate {
-webkit-animation: spinit 0.2s 5;
-moz-animation: spinit 0.2s 5;
animation: spinit 0.2s 5;
}
@-webkit-keyframes spinit {
0% {
top: 0em;
}
50% {
top: -5em;
}
100% {
top: -9em;
}
}
@-moz-keyframes spinit {
0% {
top: 0em;
}
50% {
top: -5em;
}
100% {
top: -9em;
}
}
@keyframes spinit {
0% {
top: 0em;
}
50% {
top: -5em;
}
100% {
top: -9em;
}
}
/* Set the value according to the on-load position of the spinner */
#digit1 {
top: -4em;
/* -4em means 5 will be the number */
}
#digit2 {
top: -2em;
}
#digit3 {
top: 0em;
}
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
Spin It
版本2 :(仅使用数字增量效果而不是旋转效果)
这是使用与前一个代码大致相同的代码创建的,但不同于前一个动画使得从一个数字到另一个数字的运动逐渐变化(从而产生旋转效果),这里动画使得运动更像是一个突然的从一个数字跳到另一个数字,从而产生增量效果.
跳跃是通过保持顶部位置相同直到它移动到下一个的时间来实现的(也就是说,顶部设置为0em直到动画的9.9％但是在10％时突然变为-1em).
window.onload = function() {
var spinner = document.getElementById('spinner');
spinner.onclick = spinit;
var el = document.querySelectorAll("span[id*=digit]");
for (i = 0; i < el.length; i++) {
el[i].addEventListener("animationend",false);
}
}
function randomize() {
var rand = Math.floor(Math.random() * 9);
this.style.top = -1 * rand + "em";
this.classList.toggle('animate');
}
function spinit() {
var el = document.querySelectorAll("span[id*=digit]");
for (i = 0; i < el.length; i++) {
el[i].classList.toggle('animate');
}
}
div {
width: 1em;
height: 1em;
overflow: hidden;
line-height: 1em;
display: inline-block;
}
span {
position: relative;
}
.animate {
-webkit-animation: spinit 0.2s 5;
-moz-animation: spinit 0.2s 5;
animation: spinit 0.2s 5;
}
@-webkit-keyframes spinit {
0% { top: 0em; }
9.9% { top: 0em; }
10%{ top: -1em; }
19.9%{ top: -1em; }
20%{ top: -2em; }
29.9%{ top: -2em; }
30%{ top: -3em; }
39.9%{ top: -3em; }
40%{ top: -4em; }
49.9%{ top: -4em; }
50% { top: -5em; }
59.9%{ top: -5em; }
60%{ top: -6em; }
69.9%{ top: -6em; }
70%{ top: -7em; }
79.9%{ top: -7em; }
80%{ top: -8em; }
89.9%{ top: -8em; }
90%{ top: -9em; }
99.9%{ top: -9em; }
100% { top: -9em; }
}
@-moz-keyframes spinit {
0% { top: 0em; }
9.9% { top: 0em; }
10%{ top: -1em; }
19.9%{ top: -1em; }
20%{ top: -2em; }
29.9%{ top: -2em; }
30%{ top: -3em; }
39.9%{ top: -3em; }
40%{ top: -4em; }
49.9%{ top: -4em; }
50% { top: -5em; }
59.9%{ top: -5em; }
60%{ top: -6em; }
69.9%{ top: -6em; }
70%{ top: -7em; }
79.9%{ top: -7em; }
80%{ top: -8em; }
89.9%{ top: -8em; }
90%{ top: -9em; }
99.9%{ top: -9em; }
100% { top: -9em; }
}
@keyframes spinit {
0% { top: 0em; }
9.9% { top: 0em; }
10%{ top: -1em; }
19.9%{ top: -1em; }
20%{ top: -2em; }
29.9%{ top: -2em; }
30%{ top: -3em; }
39.9%{ top: -3em; }
40%{ top: -4em; }
49.9%{ top: -4em; }
50% { top: -5em; }
59.9%{ top: -5em; }
60%{ top: -6em; }
69.9%{ top: -6em; }
70%{ top: -7em; }
79.9%{ top: -7em; }
80%{ top: -8em; }
89.9%{ top: -8em; }
90%{ top: -9em; }
99.9%{ top: -9em; }
100% { top: -9em; }
}
/* Set the value according to the on-load position of the spinner */
#digit1 {
top: -4em;
/* -4em means 5 will be the number */
}
#digit2 {
top: -2em;
}
#digit3 {
top: 0em;
}
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
Spin It
html 中数字一直往上加的动态效果,CSS动画：数字增量效果相关推荐
- java 显示网页gif_Java在窗口上加载显示GIF动画图像
Java在窗口上加载显示GIF动画图像,将多个独立的GIF图像串联在一起显示,形成GIF特有的动画形式.主要代码如下: ImageIcon[] images; //用于动画的图标数组 Timer an ...
- 图片上的文字用CSS写出毛玻璃效果
图片上的文字用CSS写出毛玻璃效果 2016-10-04 08:11 网页设计 标签:css 1297 发表评论 半透明颜色最初的使用场景之一就是作为背景.将其叠放在照片类或其他 ...
- jp在java中无法编译_JPanal上加图片的问题！
JPanal上加图片的问题! import java.awt.BorderLayout; import java.awt.Dimension; import javax.swing.JFrame; i ...
- html5 数字滚动选择器,Odometer使用JavaScript和CSS制作数字滑动效果
Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以 ...
- 调试中除了在URL上加时间戳外，如何避免js、css被返回304状态？
在本地开发环境(nginx)中,经常遇到这样的情况:调试js时浏览器总是不载入已修改的js内容,而直接吐出了上次缓存的代码. 我曾经做过以下尝试: ctrl+F5 ctrl+F5+F5+F5+F5+F ...
- 编辑视频贴纸软件_3招教你搞定怎么在视频上加贴纸，剪片必备的手机App！
我们拍摄好的vlog或其他短视频上传到B站时很可能会拍摄到一些无关的路人,如果怕侵犯别人隐私的话,在视频上添加一些贴纸会比直接打马赛克更好,而且会令视频更加搞怪可爱~那究竟怎么在视频上加贴纸?哪些手机 ...
- java 太阳系 多线程_25个CodePen上激发你创作灵感的动画案例，附源码
作品来源 | https://codepen.io/ 文章整理 | 杨小二 CodePen是很多程序员用来展示代码创作的首选在线工具.今天,我为大家精选的25个CodePen上CSS动画展示案例,这 ...
- cocos studio 制作csd动画文件 并 加载使用嵌套动画
直接使用cocos studio 制作动画,动画过程细腻,可以根据自己的想法方便调节.并且可以随意取用. 本次记录是我需要一个头像动画,放在不同的头像上,而且头像的大小各不相同. 解决方案就是: 1. ...
- 25个CodePen上激发你创作灵感的动画案例，附源码
作品来源 | https://codepen.io/ 文章整理 | 杨小二 CodePen是很多程序员用来展示代码创作的首选在线工具.今天,我为大家精选的25个CodePen上CSS动画展示案例,这 ...
- HTML中的动画起名字,css动画
css动画 首先要明白动画是一帧一帧的,由多个帧拼起来的动画 @keyframes 此为动画样式中的关键帧,用关键帧来控制css动画中的关键样式.相比较过渡更加的容易空值中间的部分 其指示了一个过程到 ...
最新文章
- 高级程序设计 c语言 在线作业,[北京师范大学]19秋《高级程序设计（C）》离线作业（资料）...
- affectnet数据集_处理表情识别中的坏数据：一篇CVPR 2020及两篇TIP的解读
- Windows10 安装 Twisted
- Python中浅拷贝和深拷贝的理解与研究
- 读书-算法《程序设计导引及在线实践》-简单计算题3：校门外的树
- （第二天）编写训练记忆软件--数字编码矩阵V1.0
- 那些年用过的机械键盘--游戏人生键盘风云#入坑keychron#
- 从CentOS7默认安装的/home中转移空间到根目录/ - LVM操作简明教程
- 如何用Python给自己做一个年终总结
- （三）Linux vi 文本编辑器,用户管理,组管理,Sudo命令,时间管理
- 微雪树莓派PICO笔记——3.PWM(脉冲宽度调制)
- el-table 表格展开与折叠
- 3GPP TS 23501-g51 中英文对照 | 4.2.1 General
- canvas画图--流畅没有齿痕的线，图像画线
- 数据平面开发套件：DPDK
- 软件测试入门第一步：编写测试报告
- 如何在5分钟内完成H5制作？
- Java学习之多线程3
- Unity 加载资源
- Ledger增加浏览器扩展，将硬件钱包与Web 3应用程序连接起来