• 时间:
  • 分类:

做电商、产品展示类页面时，总想着给卡片加点 “小心机”？不用复杂的 JS，纯 CSS 就能做出超吸睛的产品卡片悬停效果 —— 卡片展开、图片旋转缩放、文字渐显，整套交互丝滑又高级，今天就把这个实用的小效果分享给大家。

先说说这个效果的核心亮点：

✅ 纯 CSS 实现，无任何 JavaScript 代码，轻量化易部署

✅ 多属性联动过渡：卡片宽度、背景形状、图片位置 / 旋转 / 缩放、文字透明度同步变化

✅ 过渡延迟分层，交互逻辑更有层次感，不显得杂乱

话不多说，直接上完整代码，每一行关键代码都加了注释，新手也能看懂～

完整源码（附详细注释）

HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 适配移动端，保证不同设备显示正常 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 产品卡片悬停效果</title>
    <!-- 引入外部样式文件 -->
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!-- 产品卡片核心容器 -->
    <div class="card">
        <!-- 圆形背景容器，--clr自定义属性控制主题色 -->
        <div class="circle" style="--clr: #f40203;">
            <!-- 品牌logo图片 -->
            <img src="cocacola_logo.png" class="logo">
        </div>
        <!-- 产品介绍内容区 -->
        <div class="content">
            <h2>cocacola</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde maxime, iste illum dolor dolorum quidem blanditiis vitae, ipsa aspernatur consequatur perspiciatis eum quisquam ipsum quam vero quo, optio eius magni!</p>
            <!-- 跳转按钮 -->
            <a href="#">Explore More</a>
        </div>
        <!-- 产品主图 -->
        <img src="cocacola.png" class="product_img">
    </div>
</body>
</html>

CSS 部分

/* 全局样式重置：清除默认边距、盒模型改为border-box（宽高包含边框内边距） */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 页面主体样式：居中显示卡片，深色背景突出卡片效果 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 占满视口高度 */
  background: #151515;
}
/* 卡片基础样式：相对定位，设置初始宽高和圆角，过渡效果控制整体交互时长 */
.card {
  position: relative; /* 作为子元素绝对定位的参考 */
  width: 350px; /* 初始宽度 */
  height: 350px; /* 初始高度 */
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s; /* 所有过渡属性的基础时长 */
  transition-delay: 0.5s; /* 悬停时延迟触发过渡，增加层次感 */
}
/* 卡片悬停时：宽度扩展，过渡延迟重置 */
.card:hover{
  width: 600px; /* 展开后的宽度 */
  transition-delay: 0.5s;
}
/* 圆形背景容器：绝对定位覆盖整个卡片，居中对齐内容 */
.card .circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 圆形背景的伪元素：实现初始圆形背景+发光效果 */
.card .circle::before{
  content: ''; /* 伪元素必须有content */
  position: absolute;
  top: 0;
  left: 0;
  width: 350px; /* 初始圆形宽度，和卡片初始宽高一致 */
  height: 350px;
  border-radius: 50%; /* 圆形 */
  background: #191919; /* 背景色 */
  border: 8px solid var(--clr); /* 边框用自定义主题色 */
  /* 发光效果：两层阴影叠加，增强视觉冲击 */
  filter: drop-shadow(0 0 10px var(--clr)) drop-shadow(0 0 60px var(--clr));
  transition: 0.5s background 0.5s; /* 背景色和形状过渡，分层延迟 */
  transition-delay: 0.75s,1s; /* 悬停时延迟触发，保证交互顺序 */
}
/* 卡片悬停时：伪元素从圆形变矩形，背景色改为主题色 */
.card:hover .circle::before {
  transition-delay: 0.5s; /* 重置延迟，优先触发形状变化 */
  width: 100%; /* 宽度铺满卡片 */
  height: 100%; /* 高度铺满卡片 */
  border-radius: 20px; /* 矩形圆角，和卡片一致 */
  background: var(--clr); /* 背景色替换为主题色 */
}
/* logo图片样式：初始显示，悬停时消失 */
.card .circle .logo {
  position: relative;
  width: 250px;
  transition: 0.5s; /* 过渡时长 */
  transition-delay: 0.5s; /* 悬停时延迟消失 */
}
/* 卡片悬停时：logo缩小至消失 */
.card:hover .circle .logo {
  transform: scale(0); /* 缩放为0，隐藏logo */
  transition-delay: 0s; /* 立即触发，优先消失 */
}
/* 产品主图样式：初始隐藏，定位在卡片中心 */
.card .product_img {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 居中定位：translate(-50%,-50%)配合top/left:50% */
  transform: translate(-50%, -50%) scale(0) rotate(315deg); /* 初始缩放为0+旋转角度，隐藏 */
  height: 300px;
  transition: 0.5s ease-in-out; /* 过渡曲线更丝滑 */
}
/* 卡片悬停时：产品图显示+位移+旋转+缩放 */
.card:hover .product_img {
  transition-delay: 0.75s; /* 延迟触发，等卡片展开后再显示 */
  top: 25%; /* 向上位移 */
  left: 72%; /* 向右位移 */
  height: 500px; /* 放大高度 */
  /* 显示图片+调整旋转角度+缩放至正常大小 */
  transform: translate(-50%, -50%) scale(1) rotate(15deg);
}
/* 文字内容区：初始隐藏（透明+不可见） */
.card .content {
  position: absolute;
  width: 50%; /* 宽度占卡片一半 */
  left: 20%; /* 初始位置偏右 */
  padding: 20px 20px 20px 40px;
  opacity: 0; /* 透明隐藏 */
  transition: 0.5s;
  visibility: hidden; /* 不可见，避免点击交互 */
}
/* 卡片悬停时：文字内容渐显+位移到左侧 */
.card:hover .content {
  transition-delay: 0.75s; /* 延迟触发，和产品图同步显示 */
  opacity: 1; /* 完全不透明 */
  visibility: visible; /* 可见 */
  left: 20px; /* 左移到卡片边缘 */
}
/* 文字样式：白色字体，大写，大号标题 */
.card .content h2{
  color: #fff;
  text-transform: uppercase; /* 大写转换 */
  font-size: 2.5em;
  line-height: 1em;
}
/* 正文样式：白色字体 */
.card .content p {
  color: #fff;
}
/* 按钮样式：白底黑字，圆角，增加点击感 */
.card .content a {
  position: relative;
  color: #111;
  background: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  display: inline-block;
  text-decoration: none; /* 清除下划线 */
  font-weight: 600; /* 加粗 */
  margin-top: 10px;
}

最后想说，好的前端交互不一定需要复杂的代码，把基础的 CSS 属性玩透，就能做出让用户眼前一亮的效果。

如果大家还有想解锁的 CSS 小技巧，欢迎在评论区留言。

本文由mdnice多平台发布

标签: none

添加新评论