Saya cuba membuat tenda CSS dengan teks yang pudar masuk dari tepi kanan dan pudar keluar dari tepi kiri. Hanya bahagian tepi huruf hendaklah menjadi lutsinar. Saya memanggilnya sebagai "Topeng Opacity" dan meletakkannya di tepi kiri/kanan.

Saya boleh menemui contoh kod tenda CSS, tetapi tiada satu pun yang mempunyai kesan fade in/out seperti ini. Saya juga mahu latar belakang benar-benar telus dan hanya teks yang mempunyai kesan kelebihan.

Saya cuba menambah kecerunan pada bekas, tetapi apabila difikirkan semula itu tidak kelihatan seperti laluan yang betul. Di bawah ialah kod yang saya buat setakat ini. Tolong bantu, terima kasih!

@Bernard Borg: Saya telah mengemas kini kod saya dengan contoh baharu kedua. Selain daripada itu, kelegapan tidak digunakan - dan oleh itu A) bergantung pada pengekodan keras kepada warna latar belakang asas, dan B) hanya berfungsi pada latar belakang warna pepejal - yang boleh diterima untuk kes penggunaan saya. Terima kasih! (Ada idea bagaimana untuk menindih marquee dengan kelegapan dan bukannya warna?)

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>