一款純css3實現(xiàn)的非常實用的鼠標懸停特效演示
發(fā)布時間:2014-11-05 09:40:24 作者:佚名
我要評論

今天給大家介紹利用純css3實現(xiàn)非常實用的鼠標懸停特效,這款特效是當鼠標經(jīng)過時候一個半透明的遮罩層倒下,視覺感很好,高大上的感覺撲面而來,代碼也很簡單,感興趣的可以來學習一下
腳本之家之前已經(jīng)介紹很多利用純css3實現(xiàn)鼠標特效的文章了,今天給大家?guī)硪豢罨赾ss3非常實用的鼠標懸停特效。這款特效,當鼠標經(jīng)過時候一個半透明的遮罩層倒下來。效果很好,而且是純css3實現(xiàn)的,代碼很少,非常實用。 效果如下:
實現(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>
<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);}
}
{
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)文章
- CSS3實現(xiàn)的鼠標移動懸停動畫效果,請在火狐等支持CSS3屬性瀏覽器下瀏覽2013-02-25
css3+jquery鼠標懸停觸發(fā)循環(huán)高亮顯示特效
本腳本是一款jQuery+css3動畫鼠標懸停遮罩圖片高亮顯示代碼。2014-09-18- 這是一款15種不同風格的鼠標懸停圖片文字動畫特效源碼,是使用css3來實現(xiàn)的,加載速度更快,內(nèi)存占用更低,使用更加簡便2014-10-15
html5+css3實現(xiàn)的動畫鼠標懸停遮罩圖片高亮顯示效果源碼
這是一款html5+css3實現(xiàn)的動畫鼠標懸停遮罩圖片高亮顯示效果源碼,請在火狐等支持CSS3屬性瀏覽器下瀏覽,熱愛特效的你可不要錯過,希望本文可以幫助到你2014-10-17基于jquery+css3實現(xiàn)鼠標懸停圖片搖擺動畫效果源碼
這是一款基于jquery+css3實現(xiàn)鼠標懸停圖片搖擺動畫特效,喜歡特效代碼的朋友千萬不要錯過了2014-10-17jquery+CSS3實現(xiàn)鼠標懸停不同按鈕動畫效果源碼
這是一款jquery+CSS3實現(xiàn)鼠標懸停不同按鈕動畫效果源碼,非常不錯的動畫效果,腳本之家推薦下載2014-10-17- 這篇文章和大家分享一款基于css3的簡單的鼠標懸停按鈕。這款懸停按鈕鼠標經(jīng)過前邊框是間斷的。當鼠標經(jīng)過的時候邊框間隔消失。具體代碼如下文2014-11-04
- 純CSS3實現(xiàn)的鼠標懸停圖片文字動畫效果源碼是使用css3來實現(xiàn)的,加載速度更快,內(nèi)存占用更低,使用更加簡便。并且不支持低版本瀏覽器2014-11-21
- 今天小編為大家?guī)淼氖?1款純css3實現(xiàn)的鼠標懸停動畫效果源碼,總共有31種不同的動畫效果,包括放大、縮小、陰影、各個方向旋轉(zhuǎn)、翻轉(zhuǎn)、等等2014-12-01
- 這篇文章主要介紹了純css3實現(xiàn)的鼠標懸停動畫按鈕,需要的朋友可以參考下2014-12-23