使用CSS3动画实现文字滚动

以前实现文字滚动经常使用marquee标签，现在随着H5的兴起，鉴于该标签糟糕的体验，这个标签已经被W3C标准废弃了，尽管现在浏览器还支持这个标签，但是寻找文字滚动的新方式才是未来的选择。也有很多人会使用js脚本来实现文字滚动，这是兼容性和可操作性最强的做法。但是这种方式往往会使用定时器，实时操作DOM，除了比marquee能实现更多的滚动效果及功能外，并没有减少性能消耗，并且在一些新兴的MVVM框架中，如Vue，React，它们往往会对DOM视图进行数据绑定，这时候使用js操作DOM来实现文字滚动就有可能会破坏这种绑定，当文字再改变时就触发不了DOM更新了。随着CSS的发展，实现文字滚动有了更好的方式，那就是使用CSS动画。
当然，仅仅使文字滚动使用平移动画就好了：

<style>.scroll{width: 200px;height: 50px;line-height: 50px;white-space: nowrap;overflow: hidden;font-size: 30px;border: 1px solid #FF0000;}.scroll span{display: inline-block;/*inline样式不能使用动画*/animation: scroll 10s linear infinite;}@keyframes scroll {from {transform: translateX(200px)}to {transform: translateX(-100%)}}
</style>
<div class="scroll"><span>我是一个滚动条啊滚动条</span>
</div>

但是这种滚动方式体验很差，中间有过多空白，接下来我们要实现一个首尾相连的文字滚动。在不使用js改变DOM结构的前提下，要为span里添加重复内容我们可以使用after伪元素，它有个attr函数可以获取所在父元素的属性内容，前提只要我们提前将span里的内容同时设置到属性里比如data-text，我们就可以只使用CSS为span添加尾部内容，这对使用VUE等框架是很方便的。

<style>.scroll{width: 200px;height: 50px;line-height: 50px;font-size: 30px;white-space: nowrap;overflow: hidden;border: 1px solid #ff0000;}.scroll span{display: inline-block;/*inline样式不能使用动画*/animation: scroll 12s linear infinite;}.scroll span:after{content: attr(data-text);margin-left: 4em;}@keyframes scroll {from {transform: translateX(0);}to {transform: translateX(calc(-50% - 2em)); /*总长的一半再加上margin-left的一半*/}}
</style>
<div class="scroll"><span  data-text="我是一个滚动条啊滚动条">我是一个滚动条啊滚动条</span>
</div>

上面已经基本上实现了首尾相连的文字滚动了，但是带有inline性质的元素会继承上层的很多样式影响布局，同时不同浏览器对div.scroll的最终宽度计算会有偏差，导致文字滚动出现错位。为了抹平差异，我们要对after元素使用绝对定位。

<style>.scroll{position: relative;width: 200px;height: 50px;line-height: 50px;font-size: 30px;white-space: nowrap;overflow: hidden;border: 1px solid #ff0000;}.scroll span{display: inline-block;/*inline样式不能使用动画*/animation: scroll 12s linear infinite;}.scroll span:after{position: absolute;left: 100%;content: attr(data-text);margin-left: 4em;}@keyframes scroll {from {transform: translateX(0);}to {transform: translateX(calc(-100% - 4em)); /*总长再加上margin-left*/}}
</style>
<div class="scroll"><span  data-text="我是一个滚动条啊滚动条">我是一个滚动条啊滚动条</span>
</div>

这样一个纯CSS实现的文字滚动的效果就实现了，如果要实现文字超长滚动只需判断div里的span宽度是否超出并为div添加scroll类即可。但是以上实现还是存在一个缺点，就是动画周期是提前定好的，对于不同长度的文字，滚动的速度会有快有慢，如果要追求对任何文字长度均采用固定速度滚动，可以使用js根据span宽度动态指定动画周期。

使用CSS3动画实现文字滚动相关推荐

CSS3动画实现背景滚动
在上一个模仿微信打飞机的游戏中,在敌机掉落下来时,如果背景图片也可以一直无穷滚动的话,那么效果就会更好. 现在就是要利用CSS3来实现一张图片的无穷滚动. 首先了解一下CSS3的动画属性: ①.ani ...
html文字依次显示,利用定时器和css3动画制作文字依次渐变显示的效果
如上图,这种效果看着是不是挺"柔"的附代码文字一次渐变出现 body{ background-color: #333333; padding: 20px; -webkit-bo ...
android 动画无缝滚动,CSS3动画之无缝滚动
与js的无缝滚动类似,整个承载图片的盒子移动,克隆一组图片放置最后,当一组图片播放结束后将盒子定位在有一组图片宽度的左侧 HTML结构:
css动画中文字慢慢显示,利用定时器和css3动画制作文字依次渐变显示的效果
如上图,这种效果看着是不是挺"柔"的附代码文字一次渐变出现 body{ background-color: #333333; padding: 20px; -webkit-bo ...
文字滚动插件（css3动画）- 代码篇
文字滚动插件(css3动画)- 代码篇效果图动画: templete代码如下: <div class="list"><div class="rowup ...
html 自动滚动通知,利用CSS3实现文字滚动通知动画特效
特效描述:利用CSS3实现文字滚动通知动画特效.利用CSS3实现文字滚动通知动画特效代码结构 1. HTML代码 .menu-list{list-style:none; width:300px; ...
CSS3动画大全(附源码)flex布局,grid布局3d旋转,图像模糊,文字发光
CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! 文章目录 CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! html代码 css grid布局 flex布局文字发光 & 图 ...
html语言鼠标悬停特效,CSS3鼠标悬停文字幻影动画特效
这是一款CSS3鼠标悬停文字幻影动画特效.该特效利用before和after伪元素来制作当鼠标悬停在超链接文本上的时候的幻影效果. 使用方法在页面中引入bootstrap.css.jquery和ph ...
html 纯css设置转圈,CSS3 转圈彩色文字动画实例及animation-play-state属性规则
网页中的动画通常是当鼠标移到上面,动画立即停止,便于用户阅读:CSS3新增的制作动画属性也考虑到这个问题,只要作了相应的设置,鼠标移到上面,动画也会停止,移开鼠标,动画继续运动:这主要通过animat ...

使用CSS3动画实现文字滚动

使用CSS3动画实现文字滚动相关推荐

最新文章

热门文章