CSS-Marquee mit Ein-/Ausblendübergang

Question

Ich versuche, einen CSS-Laufrahmen mit Text zu erstellen, der am rechten Rand ein- und am linken Rand ausgeblendet wird. Nur die Ränder der Buchstaben sollten transparent werden. Ich nenne dies die „Deckkraftmaske“ und verteile sie an den linken/rechten Rändern.

Ich kann CSS-Marquee-Codebeispiele finden, aber keines hat einen solchen Ein-/Ausblendeffekt. Außerdem möchte ich, dass der Hintergrund völlig transparent ist und nur der Text einen Kanteneffekt hat.

Ich habe versucht, dem Container einen Farbverlauf hinzuzufügen, aber im Nachhinein scheint das nicht der richtige Weg zu sein. Unten ist der Code, den ich bisher erstellt habe. Bitte helfen Sie, danke!

@Bernard Borg: Ich habe meinen Code mit einem zweiten neuen Beispiel aktualisiert. Ansonsten wird keine Deckkraft verwendet – und ist daher A) auf die Hardcodierung der zugrunde liegenden Hintergrundfarbe angewiesen und B) funktioniert nur auf einfarbigen Hintergründen – was für meinen Anwendungsfall akzeptabel ist. Danke! (Irgendeine Idee, wie man ein Auswahlrechteck mit Deckkraft statt mit Farbe überlagern kann?)

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>

Answer 1

对不透明度属性进行动画处理（清理代码以获得更好的可读性）；

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

  

    
Testing
  

旁注：您不再需要动画的供应商前缀。

Answer 2

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

这是我能得到的最接近您更新的问题的信息；

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

  

    

    
The quick brown fox jumps over the lazy dog