带 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中文网其他相关文章！