效果演示
实现原理
给卡片添加 css3 新的过度属性（transition），鼠标移入和移出时都会触发这个过度属性，使卡片向上偏移一段距离，同时扩大卡片的背景阴影，从而实现卡片的浮动效果。
关键代码
.card-box .card {
transition: transform .2s, box-shadow .2s;
/* 省略部分代码 */
}
.card-box .card:hover {
transition: transform .2s, box-shadow .2s;
transform: translateY(-4px);
box-shadow: 4px 4px 8px rgba(0, 0, 0, .1), -4px -4px 8px rgba(0, 0, 0, .1);
}
源代码
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>卡片浮动效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 20px;
background-color: #e3e3e3;
}
.card-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40em;
height: 22em;
padding: 1.5em;
background-color: #e3e3e3;
}
.card-box .card {
transition: transform .2s, box-shadow .2s;
display: flex;
justify-content: center;
align-items: center;
width: 5.5em;
height: 3.5em;
margin-bottom: 1em;
border-radius: .5em;
box-shadow: 2px 2px 4px rgba(0, 0, 0, .1), -2px -2px 4px rgba(0, 0, 0, .1);
background-color: #fff;
color: #3e3e3e;
font-size: 1.5em;
font-weight: 700;
letter-spacing: 4px;
cursor: pointer;
}
.card-box .card:hover {
transition: transform .2s, box-shadow .2s;
transform: translateY(-4px);
box-shadow: 4px 4px 8px rgba(0, 0, 0, .1), -4px -4px 8px rgba(0, 0, 0, .1);
}
</style>
</head>
<body>
<div class="card-box">
<div class="card"><span>富强</span></div>
<div class="card"><span>民主</span></div>
<div class="card"><span>文明</span></div>
<div class="card"><span>和谐</span></div>
<div class="card"><span>自由</span></div>
<div class="card"><span>平等</span></div>
<div class="card"><span>公正</span></div>
<div class="card"><span>法治</span></div>
<div class="card"><span>爱国</span></div>
<div class="card"><span>敬业</span></div>
<div class="card"><span>诚信</span></div>
<div class="card"><span>友善</span></div>
</div>
</body>
</html>