Animierte Filmkarte mit HTML und CSS

Interaktive Komponenten sind im modernen Webdesign unerlässlich. Dieser Blog führt Sie durch die Erstellung einer stilvollen und animierten Filmkarte mit HTML und CSS. Obwohl Sie ein Anfänger oder ein fortgeschrittener Entwickler sind, ist dieses Projekt perfekt, um Ihre Front-End-Fähigkeiten zu üben.

Lasst uns anfangen!

Schritt 1: Dateien einrichten

Beginnen wir mit der Erstellung der grundlegenden Projektstruktur. Wir benötigen eine HTML-Datei für den Inhalt und eine CSS-Datei für das Styling.

Schritt 2: HTML

Hier ist die Grundstruktur unserer Filmkarte. Jede Karte beinhaltet:

• Ein Filmplakatbild.
• Ein Titelfeld-Overlay.
• Der Name des Films wird beim Hover interaktiv angezeigt.

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

Haupt-CSS: Dieses CSS verwaltet das Layout und die Animation jeder Filmkarte.

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

Hier ist der Codepen für dieses Projekt

Fazit

Wir haben erfolgreich eine animierte Filmkarte mit HTML und CSS erstellt. Dieses Konzept kann auch verwendet werden, um Projekte, Produkte oder alles, was Sie hervorheben möchten, zu präsentieren.

Danke fürs Lesen! ?

Das obige ist der detaillierte Inhalt vonAnimierte Filmkarte mit HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!