html 具有淡入/淡出效果的CSS选框

bvk5enib 于 2023-01-28 发布在其他

关注(0)|答案(3)|浏览(172)

我正在尝试做一个CSS字幕，它的文字从右边淡入，从左边淡出。只有边上的字母应该变成透明的。我称之为"不透明遮罩"，它是羽化到左/右边缘。
我可以找到CSS字幕代码样本，但没有这样一个淡入淡出效果。我还希望背景是完全透明的，只有文本的边缘效果。
我试过在容器中添加渐变，但是事后看来，这似乎不是正确的方法。下面是我到目前为止编写的代码。请帮助我，谢谢!
@伯纳德·博格：我已经用第二个新的示例更新了我的代码。除此之外，没有使用不透明度--* 因此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>

Html

来源：https://stackoverflow.com/questions/75226365/css-marquee-with-fade-in-out-effect

3条答案

按热度按时间

ccrfmcuu1#

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

这是我所能找到的最接近您更新后的问题的答案;

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来淡化文本，也许我把这个问题复杂化了。

赞(0）回复(0）举报 2023-01-28

fcipmucu2#

使opacity属性具有动画效果（已清理代码以提高可读性）;

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

<div style="background-color: black; width: 100%; height: 100%;">
  <div id="marquee-container">
    <p id="marquee">Testing</p>
  </div>
</div>

边注：动画不再需要供应商前缀。

赞(0）回复(0）举报 2023-01-28

deyfvvtc3#

div#container {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: grey;
}

div#marquee-container {
  width: 600px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  
  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 {
  width: 80%;
  height: 80%;
  --opacity: 0;
  moz-animation:     scroll-left 1s  linear infinite;
  -webkit-animation: scroll-left 1s  linear infinite;
  animation:         scroll-left 10s linear infinite;
}
            
  @-moz-keyframes scroll-left {
    0%   {-moz-transform: translateX( 100%);}
    100% {-moz-transform: translateX(-100%);}
  }
            
  @-webkit-keyframes scroll-left {
    0%   {-webkit-transform: translateX( 100%)}
    100% {-webkit-transform: translateX(-100%)}
  }
            
  @keyframes scroll-left {
    0%   {-moz-transform: translateX( 100%); -webkit-transform: translateX( 100%); transform: translateX( 100%); opacity: 0;}
    30%{
    opacity: 1;
    }
      60%{
    opacity: 0;
    }
    100% {-moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%);opacity: 0; }
  }
}

<div id="container">
  <div id="marquee-container">
    <p id="marquee">Testing</p>
  </div>
</div>

赞(0）回复(0）举报 2023-01-28

我来回答

html 具有淡入/淡出效果的CSS选框

3条答案

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

相关问题

热门标签

最新问答