挺好玩的文字滑动效果

最新推荐文章于 2022-07-03 11:05:52 发布

婆婆丁的成长记

最新推荐文章于 2022-07-03 11:05:52 发布

阅读量352

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_42855542/article/details/83317215

版权

用多了背景滑动，突然想用文字滑动的效果。
先直接看效果
在这里插入图片描述

接着直接上代码，来一个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.youkuaiyun.com/caizhitong/article/details/53783846