純css3實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片顯示描述的動(dòng)畫效果

2024-07-11 08:30:37

字體：大中小

供稿：網(wǎng)友

今天給大家?guī)淼氖怯胏ss3技術(shù)實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片，顯示圖片描述的動(dòng)畫效果。鼠標(biāo)經(jīng)過圖片時(shí)，圖片動(dòng)畫縮小并漸變顯示描述。我們一起看看效果圖：

源碼下載

我們一起學(xué)習(xí)下此案例的代碼。

html代碼：

復(fù)制代碼

代碼如下:
<div align="center">
<div class="carre_couleur base_hov" style="background-color: #f8b334;">
<a target="_blank" >
<div class="retract" style="background-color: #f8b334;">
<img src="img/1.png"></div>
<div class="acced">
<div class="big_acced" style="color: #f39c12;">
BEST HOME</div>
<div class="middle_acced">
This home is the best</div>
</div>
</a>
</div>
<div class="carre_couleur base_hov" style="background-color: #2ecc71;">
<a target="_blank" >
<div class="retract" style="background-color: #2ecc71;">
<img src="img/2.png"></div>
<div class="acced">
<div class="big_acced" style="color: #27ae60;">
BEST PIC</div>
<div class="middle_acced">
This pic is the best</div>
</div>
</a>
</div>
<div class="carre_couleur base_hov" style="background-color: #e74c3c;">
<a target="_blank" >
<div class="retract" style="background-color: #e74c3c;">
<img src="img/3.png"></div>
<div class="acced">
<div class="big_acced" style="color: #c0392b;">
BEST PC</div>
<div class="middle_acced">
This computer is the best</div>
</div>
</a>
</div>

css3代碼：

復(fù)制代碼

代碼如下:
.carre_couleur
{
width: 200px;
height: 200px;
display: inline-block;
position: relative;
margin-top: 0px;
}
.base_hov .retract
{
-webkit-transition: all 200ms ease-in;
-webkit-transform-origin: 50% 20%;
-webkit-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform-origin: 50% 20%;
-moz-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform-origin: 50% 20%;
-ms-transform: scale(1);
transition: all 200ms ease-in;
transform-origin: 50% 20%;
transform: scale(1);
width: 200px;
height: 200px;
position: absolute;
z-index: 2;
left: 0;
}
.base_hov:hover .retract
{
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(0.6);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(0.6);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(0.6);
transition: all 200ms ease-in;
transform: scale(0.6);
}
.acced
{
width: 180px;
padding: 10px;
bottom: 0;
position: absolute;
z-index: 1;
text-align: left;
}
.big_acced
{
color: #ffffff;
font-size: 25px;
font-weight: 400;
}
.middle_acced
{
color: #ffffff;
font-size: 15px;
font-weight: 400;
}

上一篇：css hover對(duì)其包含的子元素進(jìn)行樣式設(shè)置示例

下一篇：多行圖片hover加邊框會(huì)把下面的圖片擠到別處的解決方法

發(fā)表評(píng)論

共有條評(píng)論