本篇內(nèi)容主要講解“css3怎么實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片顯示描述的動(dòng)畫效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css3怎么實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片顯示描述的動(dòng)畫效果”吧!
今天給大家?guī)淼氖怯胏ss3技術(shù)實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片，顯示圖片描述的動(dòng)畫效果。鼠標(biāo)經(jīng)過圖片時(shí)，圖片動(dòng)畫縮小并漸變顯示描述。我們一起看看效果圖：
源碼下載
我們一起學(xué)習(xí)下此案例的代碼。
html代碼：
代碼如下:
css3代碼：
代碼如下:
.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;
}
到此，相信大家對“css3怎么實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片顯示描述的動(dòng)畫效果”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
重慶分公司
重慶分公司
