Cipta Infinite Scrolling Marquee dengan HTML dan CSS

Menambah animasi pada tapak web anda boleh menjadikan tapak web anda lebih interaktif dan menarik. salah satu cara terbaik untuk mencapai matlamat ini ialah dengan mencipta marquee menatal — animasi yang sangat anggun yang meluncur ke atas kandungan lancar seperti kemahiran atau alatan, menjadikan tapak web anda menonjol.

Dalam tutorial ini, saya akan menunjukkan kepada anda cara membuat tenda tatal Infinite menggunakan hanya HTML dan CSS.

Apa itu Marquee?

Marquee menatal ialah animasi ringkas yang mana kandungan bergerak merentasi skrin tanpa henti. Ini boleh digunakan untuk mempamerkan teks seperti kemahiran, teknologi dan ciri.

Jom Kodkannya

Struktur HTML

Mula-mula buat struktur html

<div>



<p>Each  contains a skill or item, and the two identical  blocks ensure continuous scrolling.

</p><p><strong>CSS</strong></p>

<p>Now add the css style for scrolling<br>
</p>

<pre class="brush:php;toolbar:false">* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #161616;
  }

  .scroll {
    position: relative;
    display: flex;
    width: 700px;
    overflow: hidden;

      -webkit-mask-image: linear-gradient(90deg, transparent, #fff 30%,
    #fff 70%, transparent);

  }

  .scroll div {
    white-space: nowrap;
    animation: animate var(--t) linear infinite;
  }

  .scroll div:nth-child(2) {
    animation: animate2 var(--t) linear infinite;
  }

  @keyframes animate {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes animate2 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-200%);
    }
  }

  .scroll div span {
    display: inline-flex;
    margin: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    text-transform: uppercase;
    background: #333;
    color: #fff;
    transition: 0.5s;
  }

  .scroll div span:hover {
    background: #f52789;
    cursor: pointer;
  }

Bagaimana Ia Berfungsi

Animasi Lancar:

Peraturan @keyframes menentukan kesan tatal lancar dan sifat animasi menggunakannya pada

.

Gelung Lancar:

Dua bahagian

yang serupa mencipta ilusi penatalan yang tidak berkesudahan dengan memulakan satu blok di pertengahan jalan.

Kesan Tuding:

Apabila anda menuding pada item, latar belakangnya bertukar kepada merah jambu terang ini (#f52789).

Sesuaikan Marquee Anda

Tukar Item: Kemas kini teg untuk memaparkan kandungan anda sendiri, seperti perkhidmatan, alatan atau testimoni.

Laraskan Kelajuan: Gunakan pembolehubah --t CSS untuk mengawal tempoh animasi. Nilai yang lebih kecil menjadikannya lebih pantas.

Tukar Warna: Sesuaikan latar belakang dan warna teks agar sesuai dengan tema anda di tapak web.

Kesimpulan

Tenda tatal ialah satu ciri yang mudah tetapi berkuasa untuk menjadikan tapak web anda menarik. Tutorial ini akan mengajar anda cara mudah membuat tenda tatal yang disesuaikan dengan kandungan dan pilihan reka bentuk anda. Cuba ini.

Atas ialah kandungan terperinci Cipta Infinite Scrolling Marquee dengan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!