帶有 HTML 和 CSS 的動畫電影卡

互動式元件在現代網頁設計中至關重要。本部落格將引導您使用 HTML 和 CSS 創建時尚的動畫電影卡。雖然您是初學者，或（中級開發人員），但這個專案非常適合練習您的前端技能。

讓我們開始吧！

第 1 步：設定檔

讓我們從建立基本的專案結構開始。我們需要一個用於內容的 HTML 檔案和一個用於樣式的 CSS 檔案。

第 2 步：HTML

這是我們電影卡的基本結構。每張卡片包含：

• 電影海報圖片。
• 標題框覆蓋。
• 懸停時互動顯示的電影名稱。

<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：此 CSS 處理每張電影卡的版面和動畫。

.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);
}

這是這個專案的代碼筆

結論

我們已經使用 HTML 和 CSS 成功創建了動畫電影卡。這個概念也可以用來展示項目、產品或任何您想要突出顯示的內容。

感謝您的閱讀！ ？

以上是帶有 HTML 和 CSS 的動畫電影卡的詳細內容。更多資訊請關注PHP中文網其他相關文章！