CSS-Marquee mit Ein-/Ausblendübergang
P粉659516906
P粉659516906 2024-03-27 21:24:13
0
2
507

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>

P粉659516906
P粉659516906

Antworte allen(2)
P粉706038741

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

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

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

P粉015402013

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

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

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

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!