CSS3复杂动画效果

电子简历里的「项目经验」卡片，常用一层裁切容器加一层可放大的背景图，再叠标题、说明和图标。 下面这组 CSS3 用 transform、transition 和半透明遮罩，做出鼠标移入后图片放大、文字从中心散开的效果。站点示例文案仍是「雨果学院 / 技术-HTML5-CSS3」。

结构很薄：最外 .container 负责 300×300 居中并 overflow: hidden；内层 .wrap 铺背景图；再内层 .bg-wrap 叠文字。动效全部写在 :hover 上，不必上 JavaScript。

一、HTML 结构

三层盒子套在一起即可。注释里的尺寸要和 CSS 对上，否则裁切边会对不齐：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电子简历-项目经验</title>
    <link rel="stylesheet" href="css/style-outer.css" />
    <link rel="stylesheet" href="css/font-style.css" />
  </head>
  <body>
    <!-- container 溢出隐藏 高宽:300px -->
    <div class="container">
      <!-- wrap 背景图片 高宽:280px -->
      <div class="wrap">
        <!-- bg-wrap 背景透明 -->
        <div class="bg-wrap">
          <h3>雨果学院</h3>
          <p>技术-HTML5-CSS3</p>
          <span class="icon-search"></span>
        </div>
      </div>
    </div>
  </body>
</html>

二、CSS 动效

body 用 flex 把卡片摆到视口正中。.wrap 的 transition: all .3s ease-out 让放大和遮罩都有过渡。注意选择器 .container .wrap .bg-wrap h3,p,span 里的 p,span 没有限定在 .bg-wrap 内，实际项目里建议写成 .bg-wrap h3, .bg-wrap p, .bg-wrap span，避免误伤页面其他段落。

*{padding: 0;margin: 0; font-size: 14px; color: rgb(214, 65, 65);}
a{text-decoration: none;}

/* 整个元素水平垂直居中 */
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 设置图片元素，水平垂直居中，溢出隐藏 */
.container{
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 设置背景图片 */
.container .wrap{
    width: 280px;
    height: 280px;
    background: url('../image//01.jpg') no-repeat;
    transition: all .3s ease-out;
    background-size: cover;
}

/* 鼠标移入背景图放大效果 */
.container .wrap:hover{
    transform: scale(1.3);
}

/* 背景全透明，内部元素水平垂直居中 */
.container .wrap .bg-wrap{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: all 0.3s ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
/* 背景透明显示 */
.container .wrap:hover .bg-wrap{
    background-color: rgba(0, 0, 0, .4);
}

/* 元素重叠效果 */
.container .wrap .bg-wrap h3,p,span{
    position: absolute;
    transition: all .3s ease-out;
    color: white;
    opacity: 0;
}

/* 上面元素向上移动，放大效果 */
.container .wrap:hover .bg-wrap h3{
    opacity: 1;
    transform: translateY(-40px) scale(1.3);
    font-size: 14px;
}

/* 中间元素放大效果 */
.container .wrap:hover .bg-wrap p{
    transform: translateY(0) scale(1.3);
    font-size: 12px;
    opacity: 1;
}

/* 下面元素向下移动，放大效果 */
.container .wrap:hover .bg-wrap span{
    transform: translateY(40px) scale(1.3);
    opacity: 1;
}

三、悬停时发生了什么

三层文字都 position: absolute，叠在同一中心；靠 translateY 往三个方向散开，才有「从中心爆开」的观感。overflow: hidden 是关键：图片放大后边缘被切掉，卡片外轮廓始终是正方形。

一句话总结：用裁切容器包住可缩放背景，hover 时加遮罩并用 translateY 把标题、说明、图标从中心散开，就是这套 CSS3 卡片动画。