本文介绍了如何使用 CSS 实现文本在水平滚动时产生淡出效果。通过巧妙地运用线性渐变和 background-clip 属性，我们可以创建一个视觉上吸引人的滚动文本效果，尤其适用于背景不均匀的场景。文章提供了详细的代码示例，并解释了关键 CSS 属性的用法，帮助读者轻松掌握该技巧。
实现水平滚动文本淡出效果
要实现文本在水平滚动时淡出的效果，核心思路是使用 CSS 的 linear-gradient 创建一个透明到文本颜色的渐变，然后利用 -webkit-background-clip: text 将渐变限制在文本的形状内。 结合 overflow-x: scroll 属性，我们便可以实现文本在滚动时两端淡出的效果。
HTML 结构
首先，我们需要一个容器 container 来控制滚动，以及一个内部元素 fade 来应用淡出效果。 文本内容放在 p 标签内。
立即学习“前端免费学习笔记（深入）”；
<body>
<div class='container'>
<div class='fade'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill8291" title="page-agent 浏览器控制（CDP）"><img
src="https://img.php.cn/upload/skill/000/000/081/179196125775037.jpg" alt="page-agent 浏览器控制（CDP）" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill8291" title="page-agent 浏览器控制（CDP）">page-agent 浏览器控制（CDP）</a>
<p>使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。</p>
</div>
<a href="/xiazai/skill8291" title="page-agent 浏览器控制（CDP）" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
</div>
</body>CSS 样式
接下来，我们定义 CSS 样式来实现淡出效果和滚动。
* {
box-sizing: border-box;
margin: 0;
font-family: sans-serif;
}
body {
height: 100vh;
color: white;
background: url('https://images.pexels.com/photos/414144/pexels-photo-414144.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat center/cover;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
background-attachment: fixed;
overflow-x: scroll;
width: 80%;
}
.fade {
background-attachment: fixed;
margin: auto;
background-image: linear-gradient(to right, transparent 12%, currentColor 30%, currentColor 70%, transparent 86%);
white-space: nowrap;
-webkit-background-clip: text;
width: fit-content;
}
p {
color: transparent;
}代码解释
- container:
- overflow-x: scroll: 允许水平滚动。
- width: 80%: 设置容器宽度，可以根据需要调整。
- display: flex: 使用Flexbox布局，方便子元素居中。
- fade:
- background-image: linear-gradient(to right, transparent 12%, currentColor 30%, currentColor 70%, transparent 86%): 创建从左到右的线性渐变。transparent 表示透明，currentColor 表示文本颜色。 调整百分比值可以控制淡出区域的大小。
- white-space: nowrap: 防止文本换行，确保文本在一行内滚动。
- -webkit-background-clip: text: 将背景裁剪为文本的形状。
- width: fit-content: 内容自适应宽度。
- p:
- color: transparent: 将文本颜色设置为透明，使我们能看到背景渐变。
注意事项
- currentColor 关键字会继承当前元素的 color 值，所以确保在 body 或 fade 元素上设置了合适的 color 值。
- -webkit-background-clip 是一个带有浏览器前缀的属性，可能需要在不同的浏览器上进行测试和兼容性处理。可以考虑使用 background-clip: text，但需要注意兼容性。
- 可以根据实际需求调整渐变的颜色和位置，以达到最佳的淡出效果。
- background-attachment: fixed 可以使背景图片固定，在滚动时不会移动。
总结
通过结合 linear-gradient、-webkit-background-clip 和 overflow-x: scroll 属性，我们可以轻松地实现水平滚动文本的淡出效果。 这种方法不仅简单有效，而且可以应用于各种背景，为网页设计增添一份精致的视觉效果。 记得根据实际需求调整代码，并进行充分的测试，以确保在各种浏览器和设备上都能正常工作。
