Cara menggunakan CSS untuk mencipta kesan marquee

Cara menggunakan CSS untuk melaksanakan kesan marquee

Kesan marquee ialah kesan khas bahagian hadapan biasa yang dipaparkan secara berterusan di web teks Tatal halaman atau gambar menambah sedikit pergerakan dan kecergasan pada halaman. Artikel ini akan memperkenalkan langkah khusus tentang cara menggunakan CSS untuk mencapai kesan marquee dan menyediakan contoh kod yang sepadan untuk rujukan.

Langkah 1: Cipta struktur HTML

Pertama, kita perlu mencipta bekas dalam HTML untuk mencapai kesan marquee. Anda boleh menggunakan elemen div sebagai bekas, seperti yang ditunjukkan di bawah:

<div class="marquee-container">
  <ul class="marquee-content">
    <li>跑马灯内容1</li>
    <li>跑马灯内容2</li>
    <li>跑马灯内容3</li>
    <!-- 添加更多的跑马灯内容 -->
  </ul>
</div>

Dalam kod di atas, kami mencipta elemen div dengan kelas "marquee-container" sebagai bekas marquee, dan dalam ini bekas Secara dalaman buat elemen ul dengan kelas "marquee-content" untuk menampung kandungan marquee.

Langkah 2: Tetapkan gaya CSS

Seterusnya, kita perlu menetapkan gaya CSS yang sepadan untuk bekas dan kandungan. Langkah-langkah khusus adalah seperti berikut:

1. Tetapkan lebar dan tinggi bekas, dan tetapkannya kepada kedudukan relatif (kedudukan: relatif) untuk meletakkan kandungan marquee dalam bekas.

.marquee-container {
  width: 100%;
  height: 100px;
  position: relative;
}

2. Tetapkan gaya kandungan dan kesan tatal. Tetapkan elemen ul kandungan kepada kedudukan mutlak (kedudukan: mutlak) dan tetapkan lebarnya kepada nilai yang lebih besar untuk memastikan kandungan boleh menatal secara mendatar.

.marquee-content {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  white-space: nowrap; /* 防止内容换行 */
  animation: marquee 10s linear infinite; /* 设置滚动效果 */
}

@keyframes marquee {
  0% { transform: translateX(0%); } /* 初始状态，内容从左侧显示 */
  100% { transform: translateX(-100%); } /* 结束状态，内容向左滚动完全消失 */
}

Dalam kod di atas, kami menyediakan animasi @keyframes bernama "marquee" untuk mencapai tatal mendatar kandungan melalui fungsi translateX atribut transform. Tetapkan keadaan awal 0% kepada offset mendatar 0%, keadaan akhir 100% kepada offset mendatar sebanyak -100% (iaitu tatal ke kiri sehingga kandungan hilang sepenuhnya), dan tetapkan animasi untuk bertahan 10 saat, linear gerakan, dan gelung tak terhingga.

Langkah 3: Laraskan kesan paparan bekas dan kandungan

Akhir sekali, kita boleh melaraskan kesan paparan bekas dan kandungan mengikut keperluan sebenar. Sebagai contoh, kita boleh menetapkan warna latar belakang, jidar, jidar, dsb. bekas agar lebih sepadan dengan gaya keseluruhan halaman. Pada masa yang sama, kami juga boleh menetapkan fon, warna, saiz fon, dsb. kandungan, dan menambah beberapa kesan peralihan CSS untuk meningkatkan kelancaran marquee.

.marquee-container {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  margin: 20px;
}

.marquee-content li {
  font-family: Arial, sans-serif;
  color: #333;
  font-size: 16px;
  padding: 10px;
  transition: color 0.3s ease-in-out;
}

.marquee-content li:hover {
  color: #ff0000; /* 鼠标悬停时改变文字颜色 */
}

Dalam kod di atas, kami menetapkan warna latar belakang bekas kepada #f2f2f2, jidar kepada 1px pepejal #ccc dan menetapkan jidar 20px. Pada masa yang sama, kami menetapkan fon kandungan kepada Arial, warna kepada #333, saiz fon kepada 16px dan menetapkan kesan peralihan warna 0.3 saat untuk kandungan, supaya warna teks bertukar menjadi merah secara beransur-ansur apabila tetikus dilegarkan.

Ringkasnya, melalui langkah di atas, kita boleh menggunakan CSS untuk mencapai kesan marquee yang mudah. Sudah tentu, berdasarkan keperluan sebenar, kita boleh mengembangkan dan mengoptimumkan lagi kesan ini. Semoga kandungan di atas dapat membantu anda!

Atas ialah kandungan terperinci Cara menggunakan CSS untuk mencipta kesan marquee. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!