話不多，看效果先：

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

實現：

1. 定義標簽，.kapian為最底層盒子，然后兩個子盒子一個放圖片，一個放文本：

The aurora borealis

natural

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.

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;

}

完整代碼：

Document

*{

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;

}

The aurora borealis

natural

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.

總結：

希望在路上~

到此這篇關于 html+css實現響應式卡片懸停效果的文章就介紹到這了,更多相關html css卡片懸停內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

總結

以上是生活随笔為你收集整理的html桌面卡牌效果,html+css实现响应式卡片悬停效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。