CSS3实现文字横向滚动

短命女 2022-10-05 13:49 224阅读 0赞

上效果图：  
![在这里插入图片描述][20210609141329914.gif_pic_center]

上代码：

<div id="tips" :style="'--textWidth--:'+ msg.length+'em'">
    	<span class="span1">{
       {msg}}</span>
    	<span class="span2">{
       {msg}}</span>
    </div>

#tips{ 
    	background: #FFEEAA;
    	width: 100%;
    	line-height: 40px;
    	height: 40px;
    	color: #FF0000;
    	overflow: hidden;
    }
    #tips span{ 
    	position: absolute;
    	left: 0;
    	white-space: nowrap;
    	margin: 0 10px;
    	white-space: nowrap;
    }
    @keyframes around1 { 
    	from { 
    		left: 0;
    	}
    	to { 
    		/* left: calc(0px - var(--textWidth--) - 10px); */
    		left: -100%;
    	}
    }
    @keyframes around2 { 
    	from { 
    		/* left: calc(var(--textWidth--) + 10px); */
    		left: 100%;
    	}
    	to { 
    		left: 0;
    	}
    }
    #tips .span1{ 
    	animation: around1 10s linear infinite;
    }
    #tips .span2{ 
    	animation: around2 10s linear infinite;
    }

data(){ 
    	return{ 
    		msg:"这是一条会滚动的提示信息！",
    	}
    }

如果字符串长度过长导致重叠的话，可以用`var(--textWidth--)`。

[20210609141329914.gif_pic_center]: /images/20221005/fe421d32f53e4f0f87a0d042a261a854.png

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关 css横向滚动列表

![在这里插入图片描述][20200413164239281.gif_pic_center] <ul class="video_list"> <li>

朱雀/ 2023年07月25日 08:45/ 0 赞/ 138 阅读

相关 css3 文字横向无缝滚动

<div class="notice-container"> <div class="header-notice-marquee" id="notice-

悠悠/ 2022年10月25日 01:24/ 0 赞/ 313 阅读

相关 CSS3实现文字横向滚动

上效果图： ![在这里插入图片描述][20210609141329914.gif_pic_center] 上代码： <div id="tips" :style=

短命女/ 2022年10月05日 13:49/ 0 赞/ 225 阅读

相关实现文字滚动效果

需求：滚动文字：每隔200ms 更新一次实现步骤： 1 、将第一个p标签的文字存储下来txt

浅浅的花香味﹌/ 2022年09月11日 13:14/ 0 赞/ 225 阅读

相关 css 隐藏滚动条竖向y滚动，横向x不滚动

.bottom { overflow-x: hidden; overflow-y: scroll; } 参考博客：

左手的ㄟ右手/ 2022年09月09日 14:51/ 0 赞/ 223 阅读

相关横向滚动条导航的实现（纯css）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

水深无声/ 2022年09月05日 12:53/ 0 赞/ 223 阅读

相关 Android 横向列表GridView 实现横向滚动

[Android 横向列表GridView 实现横向滚动][Android _GridView] Android 横向列表实现，可左右滑动，如下图 ![05171621

浅浅的花香味﹌/ 2022年06月18日 02:15/ 0 赞/ 398 阅读

相关 RecyclerView实现横向滚动

Fruit Class public class Fruit { private int fruitImageId; //图片的ID

矫情吗；*/ 2022年06月17日 09:48/ 0 赞/ 187 阅读

相关 RecyclerView实现横向滚动

Fruit Class public class Fruit { private int fruitImageId; //图片的ID

绝地灬酷狼/ 2022年06月11日 00:44/ 0 赞/ 259 阅读

相关 CSS3实现文字过渡移动

1.在需要移动的对象上加上a标签，并定义CSS <a><img src="/skin/images/ico-weixin.png" /><span>微信平台</span...

你的名字/ 2021年03月21日 02:00/ 0 赞/ 704 阅读