CSS 实现悬停多圆角的卡片

CSS 实现悬停多圆角的卡片

效果展示

CSS 知识点

• CSS 基础知识回顾
• box-shadow 属性实现圆角的知识回顾

整体页面布局实现

<div class="container">
  <div class="card">
    <div class="imgBx">
      <img src="bg1.jpg" />
    </div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum dicta natus
      dolorum fugiat magni. Unde!
    </p>
    <h2>Card 01</h2>
  </div>
</div>

实现整体卡片容器样式

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 60px;
}

.container .card {
  position: relative;
  width: 320px;
  height: 250px;
  background: #fff;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  /* 属性改变时，动画执行时间 */
  transition: 0.5s;
}

编写卡片收起样式

.container .card .imgBx {
  position: absolute;
  inset: 20px 20px 50px 20px;
  border-radius: 15px;
  transition: 0.5s;
  z-index: 100000;
}

.container .card .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.container .card p {
  position: relative;
  padding: 30px;
  text-align: center;
  /* 卡片收起时隐藏内容元素，只有鼠标悬停在卡片上时才会显示元素 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50px);
  transition: 0.5s;
}

.container .card h2 {
  position: absolute;
  bottom: 8px;
  color: #333;
  transition: 0;
  font-weight: 600;
}

实现上述代码后可以看到如下的效果：

编写卡片鼠标悬停展开样式

完成上述代码后，鼠标悬停卡片上还没有展开的样式，接下来就是实现展开样式。具体的代码如下：

实现卡片容器鼠标悬停展开样式及图片样式

.container .card:hover {
  height: 350px;
}

.container .card:hover .imgBx {
  inset: -50px 60px 250px 60px;
  box-shadow: 0 0 0 10px var(--clr);
}

实现卡片容器展开后图片的样式

.container .card .imgBx::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: -30px;
  border-top-right-radius: 20px;
  transform: translateY(-100px);
  opacity: 0;
  box-shadow: 5px -5px 0 4px var(--clr);
  pointer-events: none;
  transition: 0.5s;
}

.container .card .imgBx::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  right: -30px;
  border-top-left-radius: 20px;
  transform: translateY(-100px);
  opacity: 0;
  box-shadow: -5px -5px 0 4px var(--clr);
  pointer-events: none;
  transition: 0.5s;
}

实现卡片容器鼠标悬停展开后的图片样式

.container .card:hover .imgBx::before {
  opacity: 1;
  transform: translateY(50px);
}

.container .card:hover .imgBx::after {
  opacity: 1;
  transform: translateY(50px);
}

完成所有上述代码后，我们可以看到如下的效果：

实现卡片容器鼠标悬停展开后的内容和标题样式

.container .card:hover p {
  opacity: 1;
  visibility: visible;
  transform: translateY(-6px);
}

.container .card:hover h2 {
  padding: 5px 25px;
  background: #65ff50;
  bottom: -25px;
  border-radius: 15px;
  box-shadow: 0 0 0 10px var(--clr);
}

实现上述代码后就可以完成所有效果。

完整代码下载

完整代码下载