实现水平滚动文本的淡出效果

本文将介绍如何使用 CSS 实现水平滚动文本的淡出效果，尤其是在非均匀背景下，传统线性渐变方案不适用的情况下。我们将通过结合 linear-gradient 和 background-clip 属性，创建一个在水平滚动时两侧逐渐淡出的文本效果。

实现原理

核心思路是利用 CSS 的 linear-gradient 创建一个透明到文本颜色的渐变，并使用 -webkit-background-clip: text; 将渐变裁剪为文本的形状。通过控制渐变的颜色停止点，可以调整淡出区域的大小。为了实现水平滚动，需要将文本放置在一个容器中，并设置 overflow-x: scroll;。

具体步骤

1. HTML 结构:

   首先，创建一个包含文本的 div 元素，并将其放置在一个容器 div 中。

   
     
   
       
   
         
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   
   							
   
   								
   								
   
   									触发式加载精美特效企业网站源码1.0.0
   									
   触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也
   								
   								下载 
   							
   						
       
     
   

2. CSS 样式:

   接下来，为容器和文本元素添加 CSS 样式。

   • container: 设置容器的宽度、允许水平滚动，并使内容居中。
   • fade: 应用线性渐变，并将渐变裁剪为文本形状。white-space: nowrap; 确保文本不换行。width: fit-content; 让 fade 元素的宽度适应其内容。
   • p: 设置文本颜色为透明，以便显示背景渐变。

   * {
     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;
   }

代码解释

• background-image: linear-gradient(to right, transparent 12%, currentColor 30%, currentColor 70%, transparent 86%);: 这行代码创建了一个从左到右的线性渐变。
  • transparent 12%: 从 0% 到 12% 的区域是透明的，实现左侧的淡出效果。
  • currentColor 30%: 从 30% 开始，颜色变为文本的颜色（由 color: white; 定义）。
  • currentColor 70%: 颜色保持文本颜色直到 70%。
  • transparent 86%: 从 86% 开始，颜色变为透明，实现右侧的淡出效果。
• -webkit-background-clip: text;: 这个属性将背景（在这里是线性渐变）裁剪为文本的形状。
• color: transparent;: 将文本颜色设置为透明，以便显示裁剪后的背景渐变。
• overflow-x: scroll;: 允许容器在水平方向上滚动。
• white-space: nowrap;: 阻止文本换行，确保文本在一行内显示，以便可以水平滚动。
• width: fit-content;: 使 fade 元素的宽度自适应其内容，确保渐变效果只应用于文本区域。

注意事项

• background-clip: text 需要添加 -webkit- 前缀以获得更好的浏览器兼容性。
• 调整 linear-gradient 中的颜色停止点可以控制淡出区域的大小和位置。
• 确保容器的宽度足够小，以便文本可以水平滚动。

总结

通过结合 linear-gradient 和 background-clip 属性，我们可以轻松地实现水平滚动文本的淡出效果，即使在非均匀背景下也能正常工作。这种方法简单有效，并且可以灵活地调整淡出区域的大小，以满足不同的设计需求。