Html 具有淡入淡出效果的 CSS 选框

发布于01月25日

我正在try 制作一个css字幕，它的文本从右边缘淡入，在左边缘淡出.只有边缘上的字母应该变得透明.我把它叫做"不透明蒙版"，它被羽化到左/右边缘.

我可以找到CSS字幕代码示例，但没有一个具有这样的淡入/淡出效果.我也希望背景是完全透明的，只有文本具有边缘效果.

我试着向容器添加渐变，但事后看来，这似乎不是正确的路径.以下是我到目前为止想出的代码.请协助，谢谢！

@Bernard Borg:我已经用第二个新示例更新了我的代码.除此之外，不使用opacity-and therefore being A) dependent on being hardcoded to the underlying background color and B) only working on a solid background-对于我的用例来说，这是可以接受的.谢谢！(你知道如何用不透明而不是 colored颜色来覆盖字幕吗？)

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

#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%);
  }
}

<div id="container">
  <div id="marquee-container">
    <div id="first-cover"></div>
    <p id="marquee">The quick brown fox jumps over the lazy dog</p>
    <div id="second-cover"></div>
  </div>
</div>

出于某种原因，背景滤镜(特别是不透明滤镜)什么也做不了.怪怪的.

编辑:

您可能会为选取框的背景定义一个图像(两侧都有渐变)，然后使用mix-blend-mode以某种方式淡出文本.也许我把这件事复杂化了.\(ツ)/

Html 具有淡入淡出效果的 CSS 选框

推荐答案

对于任何将来要回答这个问题的人来说，这个问题的答案是共同努力的.在问题中找到答案.

Html相关问答推荐

从网络抓取中提取文本

如何让一个动态列表以网格方式水平显示

在将DevExtreme升级到版本23.2之后，到处都会生成一个Pesudo类，我在其中使用了<；DXi-Item Title=&Quot；&Quot；>；

Style=背景图像URL引用变成&；Quot；

禁用的文本区域会丢失换行符

文本幻灯片显示动画

如何使VS代码支持以模仿嵌套的方式对已经包含注释的HTML进行注释？

根据Tailwind CSS中的子计数而非子宽度进行对齐，并水平对齐

有没有办法移动占位符？

如果您将带有 html 标签的字符串数据(name ： test) 放在 `
` 中，则这些标签不起作用

Swift WKUserContentController 和 WKScriptMessageHandler 设置不正确

为什么 html 元素的 max-width 和 width 一起工作？

使单行路径的 svg 填充父级的 100% 宽度

Github上部署需要花费几小时时间：等待github pages部署批准

我正在使用 NVDA 并多次读取关闭按钮，但它的读取非常完美

从垫分页器中删除输入边框

如何截断一些文本并用双引号引起来？

如何从 razor 页面打开 html 页面

使用 golem 框架在shiny 的应用程序中存储背景图片的位置

文本输入在 Chrome 中保持水平滚动，带有文本溢出：省略号