我正在尝试制作一个CSS选取框，其文本从右边缘淡入并在左边缘淡出。只有边缘的字母应该变成透明的。我将其称为“不透明蒙版”，羽化到左/右边缘。
我可以找到CSS选取框代码示例，但没有一个具有这样的淡入/淡出效果。我还希望背景完全透明，只有文本具有边缘效果。
我尝试向容器添加渐变，但事后看来，这似乎不是正确的路径。下面是我迄今为止提出的代码。请帮忙，谢谢！
@Bernard Borg：我已经用第二个新示例更新了我的代码。除此之外，不使用不透明度 - 因此 A）依赖于硬编码到底层背景颜色，B）仅在纯色背景上工作 - 这对于我的用例来说是可以接受的。谢谢！ （知道如何用不透明而不是颜色覆盖选取框吗？）
div#container {
width: 60%;
height: 100%;
position: absolute;
background-color: #e6e9eb;
}
div#marquee-container {
overflow: hidden;
}
p#marquee {
animation: scroll-left 10s linear infinite;
}
@keyframes scroll-left {
0% {transform: translateX( 140%)}
100% {transform: translateX(-140%)}
}
div#marquee-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
background: linear-gradient(to right, rgba(230, 233, 235, 1) 0%, rgba(230, 233, 235, 0) 15%, rgba(230, 233, 235, 0) 85%, rgba(230, 233, 235, 1) 100%);
}
<div id="container">
<div id="marquee-container">
<p id="marquee">The quick brown fox jumps over the lazy dog</p>
<div id="marquee-cover"/> <!--thanks Bernard Borg-->
</div>
</div>
对不透明度属性进行动画处理（清理代码以获得更好的可读性）；
body { margin: 0; } div#marquee-container { width: 600px; height: 150px; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0) 100%); } p#marquee { text-align: right; animation: scroll-left 10s linear infinite; } @keyframes scroll-left { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(-80%); opacity: 0; } }旁注：您不再需要动画的供应商前缀。
对于将来遇到这个问题的任何人 - 这个问题的答案是共同的努力。在问题中找到答案。
这是我能得到的最接近您更新的问题的信息；
body { margin: 0; } #container { width: 100%; height: 100vh; background-color: grey; display: flex; align-items: center; } #marquee-container { overflow: hidden; position: relative; display: flex; justify-content: space-between; align-items: center; } p#marquee { font-family: 'Segoe UI', sans-serif; font-size: 30px; font-weight: bold; height: 80%; animation: scroll-left 5s linear infinite; white-space: nowrap; } #first-cover, #second-cover { height: 100vw; backdrop-filter: opacity(50%); width: 30vw; z-index: 100; } #first-cover { background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(128, 128, 128, 0.2)); } #second-cover { background: linear-gradient(-90deg, rgba(0, 0, 0, 0.8), rgba(128, 128, 128, 0.2)); } @keyframes scroll-left { 0% { transform: translateX(130%); } 100% { transform: translateX(-130%); } }