編碼的世界 / 優質文選 / 生涯

響應式卡片懸停效果 html+css

2022年5月02日
-   

話不多，看效果先：


卡片懸停，響應式卡片，簡約效果。

實現：


1. 定義標簽，.kapian為最底層盒子，然後兩個子盒子一個放圖片，一個放文本：
 <div class="kapian">
 <div class="tu">
 <img src="3.2.png">
 </div>





 <div class="wenben">
 <h2>The aurora borealis</h2>
 <p style="padding-bottom: 20px;">natural</p>
 <p>
 Aurora Borealis is a colorful luminous phenomenon that appears over the high magnetic latitude region of the planet's North Pole.
 I love the aurora borealis. It's so beautiful.
 </p>
 </div>
 </div>

2.先定義底層盒子的css基本樣式，長寬等，就不詳細說明了：
 .kapian{
 position: relative;
 width: 300px;
 height: 400px;
 border-radius: 3px;
 background-color: #fff;
 box-shadow: 2px 3px 3px rgb(139, 138, 138);
 overflow: hidden;
 cursor: pointer;
 transition: all 0.3s;
 }
 .kapian:hover{
 box-shadow: 2px 3px 10px rgb(36, 35, 35);
 }

:hover鼠標經過後盒子陰影變化。 transition: all 0.3s;過渡效果，陰影在0.3s內慢慢變化3. 圖片的基本樣式，采用絕對定位：
.tu{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 300px;
 overflow: hidden;
 
 }
 .tu img{
 width: 100%;
 height: 100%;
 transition: all 0.5s;
 }
 .kapian:hover .tu img{
 transform: scale(1.2);
 filter: blur(1px);
 }

:hover鼠標經過後圖片變大，而且變模糊； transform: scale(1.2);圖片變大為1.2倍； filter: blur(1px);圖片變模糊；4 .定義裝文本這個盒子的基本樣式，采用絕對定位：
 .wenben{
 position: absolute;
 bottom: -200px;
 width: 100%;
 height: 300px;
 background-color: rgb(247, 242, 242);
 transition: 0.5s;
 }
 .kapian:hover .wenben{
 bottom: 0px;
 }

:hover鼠標經過後文本框絕對定位的bottom發生改變，使得呈現文本框向上展開的效果；5 .文本框裏字符的樣式：
 .wenben h2{
 color: rgb(21, 74, 172);
 line-height: 60px;
 text-align: center;
 }
 .wenben p{
 padding: 0 30px;
 font-family: 'fangsong';
 font-size: 16px;
 font-weight: bold;
 line-height: 20px;
 text-align: center;
 }

完整代碼：


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 *{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 body{
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 background-image: radial-gradient(rgb(241, 238, 238),black);
 }
 .kapian{
 position: relative;
 width: 300px;
 height: 400px;
 border-radius: 3px;
 background-color: #fff;
 box-shadow: 2px 3px 3px rgb(139, 138, 138);
 overflow: hidden;
 cursor: pointer;
 transition: all 0.3s;
 }
 .kapian:hover{
 box-shadow: 2px 3px 10px rgb(36, 35, 35);
 }
 .tu{
 position: absolute;
 top: 0;





 left: 0;
 width: 100%;
 height: 300px;
 overflow: hidden;
 
 }
 .tu img{
 width: 100%;
 height: 100%;
 transition: all 0.5s;
 }
 .kapian:hover .tu img{
 transform: scale(1.2);
 filter: blur(1px);
 }
 .wenben{
 position: absolute;
 bottom: -200px;
 width: 100%;
 height: 300px;
 background-color: rgb(247, 242, 242);
 transition: 0.5s;
 }
 .kapian:hover .wenben{
 bottom: 0px;
 }
 .wenben h2{
 color: rgb(21, 74, 172);
 line-height: 60px;
 text-align: center;
 }
 .wenben p{
 padding: 0 30px;
 font-family: 'fangsong';
 font-size: 16px;
 font-weight: bold;
 line-height: 20px;
 text-align: center;
 }
 </style>
</head>
<body>
 <div class="kapian">
 <div class="tu">
 <img src="3.2.png">
 </div>
 <div class="wenben">
 <h2>The aurora borealis</h2>
 <p style="padding-bottom: 20px;">natural</p>
 <p>
 Aurora Borealis is a colorful luminous phenomenon that appears over the high magnetic latitude region of the planet's North Pole.
 I love the aurora borealis. It's so beautiful.
 </p>
 </div>
 </div>
</body>
</html>

總結：


希望在路上~

熱門文章