今天給大家分享一個用CSS 3.0實現的卡片懸停立體特效，效果如下：
以下是代碼實現，歡迎大家制復粘貼和收藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3.0實現卡片懸停立體特效</title>
<style>
* {
font-family: '微軟雅黑', sans-serif;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #ebf5fc;
}
.container {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
width: 1100px;
flex-wrap: wrap;
}
.container .card {
width: 320px;
margin: 20px;
padding: 40px 30px;
background: #ebf5fc;
border-radius: 40px;
box-shadow: -6px -6px 20px rgba(255, 255, 255, 1),
6px 6px 20px rgba(0, 0, 0, .1);
}
.container .card:hover {
box-shadow: inset -6px -6px 10px rgba(255, 255, 255, 0.5),
inset 6px 6px 20px rgba(0, 0, 0, 0.05);
}
.container .card .imgBx {
position: relative;
text-align: center;
}
.container .card .imgBx img {
max-width: 120px;
}
.container .card .contentBx {
position: relative;
margin-top: 20px;
text-align: center;
}
.container .card .contentBx h2 {
color: #32a3b1;
font-weight: 700;
font-size: 1.4em;
letter-spacing: 2px;
}
.container .card .contentBx p {
color: #32a3b1;
}
.container .card .contentBx a {
display: inline-block;
padding: 10px 20px;
margin-top: 15px;
border-radius: 40px;
color: #32a3b1;
font-size: 16px;
text-decoration: none;
box-shadow: -4px -4px 15px rgba(255, 255, 255, 1),
4px 4px 15px rgba(0, 0, 0, .1);
}
.container .card .contentBx a:hover {
box-shadow: inset -4px -4px 10px rgba(255, 255, 255, 0.5),
inset 4px 4px 10px rgba(0, 0, 0, .1);
}
.container .card .contentBx a:hover span {
display: block;
transform: scale(0.98);
}
.container .card:hover .imgBx,
.container .card:hover .contentBx {
transform: scale(0.98);
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="imgBx">
<img src="design.png" alt="">
</div>
<div class="contentBx">
<h2>設計</h2>
<p>任何時候，無論你面臨着生命的何等困惑，抑或經受着多少挫折，無論道路如何的艱難，無論希望變得如何渺茫，請你不要絕望，再試一次，成功一定屬於你!</p>
<a href="#"><span>Read More</span></a>
</div>
</div>
<div class="card">
<div class="imgBx">
<img src="code.png" alt="">
</div>
<div class="contentBx">
<h2>編碼</h2>
<p>任何時候，無論你面臨着生命的何等困惑，抑或經受着多少挫折，無論道路如何的艱難，無論希望變得如何渺茫，請你不要絕望，再試一次，成功一定屬於你!</p>
<a href="#"><span>Read More</span></a>
</div>
</div>
<div class="card">
<div class="imgBx">
<img src="launch.png" alt="">
</div>
<div class="contentBx">
<h2>成長</h2>
<p>任何時候，無論你面臨着生命的何等困惑，抑或經受着多少挫折，無論道路如何的艱難，無論希望變得如何渺茫，請你不要絕望，再試一次，成功一定屬於你!</p>
<a href="#"><span>Read More</span></a>
</div>
</div>
</div>
</body>
</html>