欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一款純css3實(shí)現(xiàn)的非常實(shí)用的鼠標(biāo)懸停特效演示

  發(fā)布時(shí)間：2014-11-05 09:40:24   作者：佚名   我要評(píng)論
今天給大家介紹利用純css3實(shí)現(xiàn)非常實(shí)用的鼠標(biāo)懸停特效，這款特效是當(dāng)鼠標(biāo)經(jīng)過時(shí)候一個(gè)半透明的遮罩層倒下，視覺感很好，高大上的感覺撲面而來，代碼也很簡單，感興趣的可以來學(xué)習(xí)一下

　　腳本之家之前已經(jīng)介紹很多利用純css3實(shí)現(xiàn)鼠標(biāo)特效的文章了，今天給大家?guī)硪豢罨赾ss3非常實(shí)用的鼠標(biāo)懸停特效。這款特效，當(dāng)鼠標(biāo)經(jīng)過時(shí)候一個(gè)半透明的遮罩層倒下來。效果很好，而且是純css3實(shí)現(xiàn)的，代碼很少，非常實(shí)用。 效果如下：

　　實(shí)現(xiàn)的代碼：

　　html代碼：


復(fù)制代碼
代碼如下:
<div align="center" style="position: relative;">
<div class="contener">
<div class="txt_init">
LOW POLY BACKGROUND</div>
<div class="opac">
Download</div>
</div>
</div>

　　css3代碼：


復(fù)制代碼
代碼如下:
.contener
{
width:310px;
height:140px;
background-image:url(fond.png);
overflow: hidden;
cursor: pointer;
position:relative;
}
.txt_init
{
position: absolute;
bottom: 5px;
right: 5px;
font-family: 'Roboto';
font-size: 22px;
color: #ffffff;
font-weight: 500;
}
.opac
{
opacity: 0;
}
.contener:hover .opac
{
width:310px;
position: absolute;
z-index: 1;
font-family: 'Roboto';
font-size: 25px;
color: #ffffff;
font-weight: 300;
line-height: 140px;
height:140px;
opacity: 1;
background-color: rgba(0,0,0,0.7);
-webkit-animation:oblik 0.4s ease-in;
-webkit-transform-origin: 0% 100%;
-moz-animation:oblik 0.4s ease-in;
-moz-transform-origin: 0% 100%;
-ms-animation:oblik 0.4s ease-in;
-ms-transform-origin: 0% 100%;
animation:oblik 0.4s ease-in;
transform-origin: 0% 100%;

}
@-webkit-keyframes oblik {
0% {opacity:0;-webkit-transform: rotate(-45deg);}
100% {opacity:1;-webkit-transform: rotate(0deg);}
}
@-moz-keyframes oblik {
0% {opacity:0;-moz-transform: rotate(-45deg);}
100% {opacity:1;-moz-transform: rotate(0deg);}
}
@-ms-keyframes oblik {
0% {opacity:0;-ms-transform: rotate(-45deg);}
100% {opacity:1;-ms-transform: rotate(0deg);}
}
@keyframes oblik {
0% {opacity:0;transform: rotate(-45deg);}
100% {opacity:1;transform: rotate(0deg);}
}

相關(guān)文章

最新評(píng)論