用代码轻松实现卡片放大播放动效，引爆视觉盛宴！

前端

2023-11-10 20:25:55

一、初识卡片放大播放效果

卡片放大播放效果是一种常见的UI交互设计，能够在鼠标悬停在卡片上的时候，放大卡片的内容并开始播放视频或动画。这种效果可以用来吸引用户的注意力，并让他们更容易地了解卡片上的内容。

二、用CSS实现卡片放大播放效果

准备工作

创建一个HTML文件和一个CSS文件，并将其命名为index.html和style.css。
在HTML文件中，创建一个包含卡片的容器。每个卡片都应该包含一张封面图片、一个标题和一个。

CSS代码

在CSS文件中，添加以下代码来设置卡片的样式。

.card {
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  overflow: hidden;
  position: relative;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.card-description {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: none;
}

添加以下代码来设置卡片放大播放效果。

.card:hover .card-image {
  transform: scale(1.2);
  transition: all 0.5s ease-in-out;
}

.card:hover .card-title {
  display: block;
}

.card:hover .card-description {
  display: block;
}