用多了背景滑动，突然想用文字滑动的效果。 先直接看效果
接着直接上代码，来一个hover事件先：
html：
<div class="cont"> <a data-hover="你在南方的艳阳里大雪纷飞" class="animate">你在南方的艳阳里大雪纷飞</a> </div>css：
.cont{ position: relative; } .animate{ color:red; position: absolute; top:50px; left: 50px; font-size: 50px; } .animate:hover::before{ max-width: 100%; } .animate::before{ white-space:nowrap; position: absolute; top: 0; left: 0; font-size: 50px; overflow: hidden; max-width: 0; color: green; content: attr(data-hover)； -webkit-transition: max-width 1.5s; -moz-transition: max-width 1.5s; transition: max-width 1.5s; }上面的 white-space:nowrap; 需要注意下，我这里用的中文，中文是会在宽度不够的时候自动换行的，而英文不会，不行的同学可以尝试着吧 white-space:nowrap; 样式去掉。
（在这里有一个人的博客写过： 强制换行 1、word-break: break-all; 只对英文起作用，以字母作为换行依据。 2、word-wrap: break-word; 只对英文起作用，以单词作为换行依据。 3、white-space: pre-wrap; 只对中文起作用，强制换行。
禁止换行 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;）
括号内容来源以下博客，感兴趣的朋友可以去看看。 https://blog.csdn.net/caizhitong/article/details/53783846
