前端例程20220922：文本跑马灯效果
Posted Naisu Xu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端例程20220922：文本跑马灯效果相关的知识，希望对你有一定的参考价值。
演示
原理
文本跑马灯效果其实有个叫做 <marquee> 的标签可以实现，但这不是一个正式的标签，也不被推荐使用。
题外话：也有说法说人对动态切换的内容接收效果其实挺差的，比如那种自动滚动的图片轮播，大多数时候人们可能就只对第一眼看到的图片印象深刻而已。
- 本文中文本跑马灯效果使用CSS动画实现，设置文本框初始和结束水平位置，动画过程中文本框和其中的文本就在滚动状态；
- 文本框设置其中文本不换行；
- 注意文本框初始和结束位置要分别根据其中文本内容宽度和文本框本身宽度来设置；
- 设置文本框的容器
overflow: hidden;，这样文本框滚动时视觉上就不会溢出了； - 另外我这里设置了两个透明渐变的元素块放在文本框容器上层左右两侧，以实现文本的淡入淡出效果；
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>文本跑马灯效果</title>
<style>
*
padding: 0;
margin: 0;
user-select: none;
box-sizing: border-box;
html,
body
height: 100vh;
body
display: flex;
align-items: center;
justify-content: center;
background: #eeeeee;
</style>
<style>
.marquee
border-radius: 1rem;
background-color: #dddddd;
width: 40rem;
padding: 2rem;
.marquee>div
overflow: hidden;
.marquee>div>p
white-space: nowrap;
color: #333333;
/* 根据字体大小与文字内容下面文本长度约为70rem */
font-size: 2rem;
/* 根据父元素宽度和缩进设置，文本框长度为36rem */
transform: translateX(36rem);
animation: anime-marquee 10s linear infinite;
@keyframes anime-marquee
0%
transform: translateX(36rem);
100%
transform: translateX(-70rem);
</style>
<!-- 使用渐变半透明元素作为遮罩实现文字淡入淡出效果 -->
<style>
.marquee>div
position: relative;
.marquee>div>p
z-index: 0;
.marquee>div::before
content: "";
position: absolute;
top: 0;
left: 0;
width: 4rem;
height: 100%;
background: linear-gradient(to right, #dddddd, transparent);
z-index: 1;
.marquee>div::after
content: "";
position: absolute;
top: 0;
right: 0;
width: 4rem;
height: 100%;
background: linear-gradient(to left, #dddddd, transparent);
z-index: 1;
</style>
</head>
<body>
<div class="marquee">
<div>
<p>文本滚动效果。 Text scrolling effect. 文本跑马灯效果。Text marquee effect.</p>
</div>
</div>
</body>
</html>
更多例程
更多例程可以参考下面代码仓库：
https://github.com/NaisuXu/front-end-web-examples
以上是关于前端例程20220922：文本跑马灯效果的主要内容，如果未能解决你的问题，请参考以下文章