css数字/文字滚动效果

效果：

原理

利用伪类，开始的时候给本来的内容盖住，然后执行动画。
设置宽高，宽就是单个内容（比如数字中的一位数）的宽，让内容一行一个的排成列。
动画就是让这些内容一个个的往上升，造成一种滚动效果
最后露出原来的内容（原来的内容和伪类里的内容是同样的样式）

代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>数字滚动</title><style>/*无关紧要的属性*/.txt {position: absolute;left: 178px;font-size: 30px;line-height: 30px;}/*接下来这一段是重点*//*设置内容和伪类的样式*/.mod_txt {position: relative;display: inline-block;vertical-align: middle;text-align: center;float: left;overflow: hidden;width: 22px;height: 30px;text-transform: uppercase;font-size: 30px;color: #333;}.mod_txt:before {position: absolute;top: 0;left: 0;width: 100%;word-break: break-all;background: #FFFFFF;font-size: 30px;color: #333;}/*设置里面第一个数字的动画*/.txt11 span:nth-child(1):before {content: "03456789";-webkit-animation-name: txt1;animation-name: txt1;-webkit-animation-duration: 1.6s;animation-duration: 1.6s;/* -webkit-animation-delay: 0.3s;animation-delay: 0.3s; */-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}/*随便写的数，作用就是让这一列数字向上升，形成滚动效果*/@-webkit-keyframes txt1 {from {margin-top: -648px;}to {margin-top: 110px;}}/*设置里面第二个数字的动画*/.txt11 span:nth-child(2):before {content: "051341989";-webkit-animation-name: txt1;animation-name: txt1;-webkit-animation-duration: 1.8s;animation-duration: 1.8s;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}</style>
</head>
<body><div class="txt txt11"><span class="mod_txt">2</span><span class="mod_txt">0</span></div>
</body>
</html>

唠唠叨叨

想让动画停留的时间不一样，就要让animation-duration不一样
想让动画开始运动的时间不同，就单加animation-delay,但这样会让原来的数字先被看到一会
想先不让动画执行，到一定时间了再执行的话，以上面的demo为例，html里可以先不写class名txt11
，等到了时候再$('.txt').addClass('txt11');就好了

css数字/文字滚动效果相关推荐

CSS实现文字动画效果
今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习. 今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加 ...
CSS实现文字动画效果【每日一题】
今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加载时的效果,现在,我们一起来看一下这个项目的最终效果: HTML代码: <!DOCTYPE html> <htm ...
使用css实现字幕滚动效果
使用css实现字幕滚动效果最近业务需要,让电子屏上面的横幅能够自动的滚动,但是用js加requireanimation实现的话感觉有点浪费,转念想到了用css 的animation似乎也能够实现大致 ...
CSS实现文字镂空效果炫酷背景效果
CSS实现文字镂空效果炫酷背景效果 css3中的mix-blend-mode css3中有一个mix-blend-mode的screen混合模式,可以轻松实现镂空文字效果.背景我们可以固定定位设置一个 ...
CSS设置文字镂空效果
CSS设置文字镂空效果 color设置transparent,也就是透明 -webkit-text-stroke: 1px @theme-font-color;可以自定义边框的宽度和颜色 color: ...
【每日一练】20—CSS实现文字动画效果
写在前面今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习. 今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是 ...
js，jq html css 实现数字上下滚动效果
文章目录使用方法一.gScrollNumber.js是什么? 二.使用步骤 1.引入库 2.效果截图使用方法用于数字屏更新滚动效果. 一.gScrollNumber.js是什么? 用来使数字能 ...
html怎么设置文字滚动效果,css如何实现滚动文字，实现滚动文字的代码
css如何实现滚动文字,实现滚动文字的代码发布时间:2020-05-09 10:35:36 来源:亿速云阅读:228 作者:小新这篇文章主要为大家详细介绍了css如何实现滚动文字,实现滚动文字的 ...
原生js实现大屏数字上下滚动效果，支持随机多位数字
一文看懂大屏数字滚动前言一.html 二.js生成展示的元素三.css实现样式四.加入动画和定时器前言在大屏项目中经常需要实现那种数字上下滚动的效果,普通的数字随机滚动在UI组件(例如Vi ...

css数字/文字滚动效果

效果：

原理

代码

唠唠叨叨

css数字/文字滚动效果相关推荐

最新文章

热门文章