完成图：
鼠标经过的过渡效果图：
HTML代码块：
<div class="container"><!-- 卡片 --><div class="card"><!-- 卡片内容 --><div class="face face1"><h2>hello</h2><p>美女</p></div><!-- 外层 --><div class="face face2"><h2>01</h2></div></div><div class="card"><div class="face face1"><h2>hey</h2><p>帅哥</p></div><div class="face face2"><h2>02</h2></div></div><div class="card"><div class="face face1"><h2>hi</h2><p>大哥</p></div><div class="face face2"><h2>03</h2></div></div></div>
CSS页面代码块：
body{margin: 0;padding: 0;display: flex;min-height: 100vh;justify-content: center;align-items: center;background: linear-gradient(45deg,#FF69B4,#9400D3);}.container{width: 1200px;display: grid;grid-template-columns: repeat(auto-fit,minmax(350px,1fr));grid-gap: 15px;margin: 0 auto;}.container .card{position: relative;width: 300px;height: 400px;margin: 0 auto;background: #fff;box-shadow: 0 15px 60px rgba(0, 0, 0, .5);}.container .card .face{width: 100%;height: 100%;position: absolute;bottom: 0;left: 0;display: flex;justify-content: center;align-items: center;}.container .card .face .face1{box-sizing: border-box;padding: 20px;}.container .card .face1 h2{margin: 0;padding: 0;}.container .card .face2{background: #111;transition: .5s;}/* 经过外层高度变小 */.container .card:hover .face2{height: 60px;}/* 经过字体变小 */.container .card:hover .face2 h2{font-size: 2em;}/* 三个卡片外层渐变色 */.container .card:nth-child(1) .face2{background: linear-gradient(45deg,#FFC0CB,#FF00FF);}.container .card:nth-child(2) .face2{background: linear-gradient(45deg,#00FA9A,#1E90FF);}.container .card:nth-child(3) .face2{background: linear-gradient(45deg,#FFFF00,#FF1493);}.container .card .face2::before{content: '';position: absolute;top: 0;left: 0;width:50% ;height: 100%;background: rgba(255, 255,255, .1);}.container .card .face2 h2{margin:0;padding: 0;font-size: 10em;color: #fff;transition: 0.5s;}
记得在index页面引入css样式~`
<link rel="stylesheet" href="index.css">
