Kad Filem Animasi dengan HTML dan CSS

Komponen interaktif adalah penting dalam reka bentuk web moden. Blog ini akan membimbing anda membuat kad filem yang bergaya dan animasi menggunakan HTML dan CSS. Walaupun anda seorang pemula, atau (pembangun pertengahan), projek ini sesuai untuk melatih kemahiran bahagian hadapan anda.

Jom mulakan!

Langkah 1: Menyediakan fail

Mari kita mulakan dengan mencipta struktur projek asas. Kami memerlukan fail HTML untuk kandungan dan fail CSS untuk penggayaan.

Langkah 2: HTML

Berikut ialah struktur asas kad filem kami. Setiap kad termasuk:

• Imej poster filem.
• Tindan kotak tajuk.
• Nama filem dipaparkan secara interaktif pada tuding.

<div>



<p>Step 3: CSS</p>

<p>Now let’s style the page to make it visually appealing and interactive. We’ll focus on the layout, hover effects, and overall aesthetics.</p>

<p><strong>Basic Page Styling</strong></p>

<p>We begin with some global styles to center the content and set the background theme.<br>
</p>

<pre class="brush:php;toolbar:false">@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");

body {
  display: grid;
  height: 100vh;
  place-items: center;
  font-family: "Noto Sans", sans-serif;
  background: #282634;
}

CSS Utama: CSS ini mengendalikan reka letak dan animasi setiap kad filem.

.content__shows {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.content__shows div {
  position: relative;
  width: 200px;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 auto;
}
.content__shows div:hover img {
  transform: scale(1.15);
}
.content__shows div .title-box {
  content: "";
  height: 100px;
  position: absolute;
  transform: translatey(50px);
  transition: 0.3s ease;
  left: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), black);
  width: 100%;
  z-index: 1;
}
.content__shows div img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  transition: 0.3s ease;
}
.content__shows div .name {
  position: absolute;
  width: 100%;
  bottom: 10px;
  color: #fff;
  transform: translatey(50px);
  padding: 10px;
  z-index: 10;
  transition: .3s ease;
  cursor: default;
}
.content__shows div:hover .name,
.content__shows div:hover .title-box {
  transform: translatey(0);
}

Berikut ialah codepen untuk projek ini

Kesimpulan

Kami telah berjaya mencipta kad filem animasi menggunakan HTML dan CSS. Konsep ini juga boleh digunakan untuk mempamerkan projek, produk atau apa sahaja yang anda ingin tonjolkan.

Terima kasih kerana membaca! ?

Atas ialah kandungan terperinci Kad Filem Animasi dengan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!