用多了背景滑动,突然想用文字滑动的效果。
先直接看效果
接着直接上代码,来一个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