html+css實(shí)現(xiàn)響應(yīng)式卡片懸停效果

話不多,看效果先:
卡片懸停,響應(yīng)式卡片,簡約效果。
實(shí)現(xiàn):
1. 定義標(biāo)簽,.kapian為最底層盒子,然后兩個(gè)子盒子一個(gè)放圖片,一個(gè)放文本:
<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基本樣式,長寬等,就不詳細(xì)說明了:
.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鼠標(biāo)經(jīng)過后盒子陰影變化。
transition: all 0.3s;過渡效果,陰影在0.3s內(nèi)慢慢變化
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鼠標(biāo)經(jīng)過后圖片變大,而且變模糊;
transform: scale(1.2);圖片變大為1.2倍;
filter: blur(1px);圖片變模糊;
4 .定義裝文本這個(gè)盒子的基本樣式,采用絕對定位:
.wenben{ position: absolute; bottom: -200px; width: 100%; height: 300px; background-color: rgb(247, 242, 242); transition: 0.5s; } .kapian:hover .wenben{ bottom: 0px; }
:hover鼠標(biāo)經(jīng)過后文本框絕對定位的bottom發(fā)生改變,使得呈現(xiàn)文本框向上展開的效果;
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>
總結(jié):
希望在路上~
到此這篇關(guān)于 html+css實(shí)現(xiàn)響應(yīng)式卡片懸停效果的文章就介紹到這了,更多相關(guān)html css卡片懸停內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- CSS3防疫知識圖文響應(yīng)式布局代碼是一款運(yùn)用css3寫響應(yīng)式的頁面布局,可根據(jù)瀏覽器的窗口大小來自適應(yīng)頁面布局。2020-12-22
- CSS3響應(yīng)式個(gè)人名片圖文布局代碼是一款個(gè)人名片,可根據(jù)瀏覽器的窗口大小來自動(dòng)改變頁面布局。2020-12-21
詳解CSS3實(shí)現(xiàn)響應(yīng)式手風(fēng)琴效果
這篇文章主要介紹了詳解CSS3實(shí)現(xiàn)響應(yīng)式手風(fēng)琴效果,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2020-06-10- 這篇文章主要介紹了css3 響應(yīng)式媒體查詢的示例代碼,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-25
HTML5 圖片懸停放大的實(shí)現(xiàn)代碼示例
這篇文章主要介紹了HTML5 圖片懸停放大的實(shí)現(xiàn)代碼示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)2019-12-04html用title屬性實(shí)現(xiàn)鼠標(biāo)懸停顯示文字
實(shí)現(xiàn)鼠標(biāo)懸停顯示文字,html中使用title屬性就可實(shí)現(xiàn)顯示文字的效果,這個(gè)屬性還是比較實(shí)用的,需要的朋友可以參考下2014-09-06