CSS實(shí)現(xiàn)鼠標(biāo)懸浮出現(xiàn)遮罩層示例源碼
發(fā)布時(shí)間：2016-09-05 18:01:14 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章給大家分享了兩個(gè)鼠標(biāo)懸浮出現(xiàn)說明遮罩層的效果，大家可以根據(jù)自己的需要選擇某一種效果，兩種效果文中都給出了實(shí)例代碼，下面來一起看看吧。
先來一個(gè)簡單的實(shí)現(xiàn)方法：
復(fù)制代碼
代碼如下:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.mask-wrapper {
position: relative;
overflow: hidden;
}
.mask-inner {
position: absolute;
left: 0;
top: 100%;
width: 100%;
height: 100%;
-moz-transition: top ease 200ms;
-o-transition: top ease 200ms;
-webkit-transition: top ease 200ms;
transition: top ease 200ms;
}
.mask-wrapper:hover .mask-inner {
top: 0;
}
#my-mask {
width: 300px;
height: 200px;
background: red;
}
#my-mask .mask-inner {
background: rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div id="my-mask" class="mask-wrapper">
<p>Lorem ipsum</p>
<div class="mask-inner">
<p>foo bar</p>
</div>
</div>
</body>
</html>
效果圖：
來個(gè)更高級(jí)點(diǎn)的：
復(fù)制代碼
代碼如下:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 12px/1.5 arail;
}
ul {
list-style: none;
}
.icon-lists {
overflow: hidden;
background: #f7f7f7;
padding: 40px;
}
.icon-lists .box {
float: left;
margin-right: 10px;
}
.box {
position: relative;
width: 46px;
height: 46px;
overflow: hidden;
z-index: 1;
}
.box i, .box .info {
display: block;
width: 46px;
height: 46px;
border-radius: 46px;
}
.box .shadow {
position: absolute;
top: 0;
z-index: 10;
border-radius: 0;
background: url(<a >http://xiaomingming.qiniudn.com/shadow.png</a>) no-repeat;
}
.box .icon {
position: absolute;
top: 0;
line-height: 46px;
text-align: center;
background: #eee;
color: #333;
font-size: 14px;
}
.box .info {
position: absolute;
top: 46px;
z-index: 2;
background: orange;
color: #fff;
text-align: center;
line-height: 46px;
-webkit-transition:top .2s ease-in;
-moz-transition:top .2s ease-in;
transition:top .2s ease-in;
}
.box:hover>.info {
top:0;
}</p> <p> </style>
</head>
<body>
<ul class="icon-lists">
<li class="box">
<i class="shadow"></i>
<i class="icon">A</i>
<div class="info">服裝</div>
</li>
<li class="box">
<i class="shadow"></i>
<i class="icon">B</i>
<div class="info">鞋包</div>
</li>
<li class="box">
<i class="shadow"></i>
<i class="icon">C</i>
<div class="info">配飾</div>
</li>
<li class="box">
<i class="shadow"></i>
<i class="icon">D</i>
<div class="info">運(yùn)動(dòng)</div>
</li>
</ul>
</div>
</body>
</html>
效果圖：
以上就是這篇文章的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)和工作能帶來一定的幫助。
相關(guān)文章
純CSS3實(shí)現(xiàn)鼠標(biāo)滑過圖片出現(xiàn)條紋遮罩層動(dòng)畫特效源碼
這是一款基于純CSS3實(shí)現(xiàn)鼠標(biāo)滑過圖片出現(xiàn)條紋遮罩層動(dòng)畫特效源碼。畫面中有三幅圖片，鼠標(biāo)滑過圖片的時(shí)候可以看到圖片上以旋轉(zhuǎn)的方式出現(xiàn)條紋遮罩層，同時(shí)遮罩層上顯示文字2019-08-01- 這篇文章主要介紹了CSS3 mask 遮罩的具體使用方法，詳細(xì)的介紹了CSS3 mask 遮罩的具體使用，具有一定的參考價(jià)值，有興趣的可以了解一下2017-11-03
css3實(shí)現(xiàn)鼠標(biāo)懸停位置圖片神秘遮罩層點(diǎn)擊放大顯示效果源碼
這是一款基于css3實(shí)現(xiàn)鼠標(biāo)懸停位置圖片神秘遮罩層點(diǎn)擊放大顯示效果源碼。畫面上有黑色遮罩層遮住了背景圖片，鼠標(biāo)滑過的位置可顯示部分背景圖片，點(diǎn)擊鼠標(biāo)左鍵可放大鼠標(biāo)位2017-07-31
CSS3鼠標(biāo)hover圖片遮罩層文字動(dòng)畫特效
這是一款使用CSS3制作鼠標(biāo)hover圖片遮罩層動(dòng)畫特效，在鼠標(biāo)hover圖片時(shí)，會(huì)生成一個(gè)不同顏色的遮罩層，并顯示文字2017-06-27
jQuery和CSS3超酷圖片遮罩層和lightbox動(dòng)畫特效
該特效使用CSS3來制作鼠標(biāo)滑過圖片時(shí)的遮罩層動(dòng)畫效果，并使用magnific-popup.js來制作點(diǎn)擊圖片后的Lightbox特效，超酷，需要的朋友可以下載試試2016-10-21
CSS3鼠標(biāo)滑過圖片標(biāo)題和遮罩層動(dòng)畫特效源碼
本特效是一款使用CSS3制作的簡單的鼠標(biāo)滑過圖片標(biāo)題和遮罩層動(dòng)畫特效的代碼，通過CSS3 transitions和transform屬性實(shí)現(xiàn)2016-08-04
css3實(shí)現(xiàn)的點(diǎn)擊按鈕彈出無刷新交互遮罩層特效源碼
是一段實(shí)現(xiàn)了點(diǎn)擊按鈕后會(huì)直接彈出一個(gè)懸浮的無刷新交互遮罩層效果，在此遮罩層內(nèi)會(huì)出現(xiàn)相關(guān)的內(nèi)容及表單、按鈕效果，功能非常強(qiáng)大且實(shí)用，本段代碼適應(yīng)于所有網(wǎng)頁使用，有2016-06-12SCSS移動(dòng)端頁面遮罩層效果的實(shí)現(xiàn)及常見問題解決
這篇文章主要介紹了SCSS移動(dòng)端頁面遮罩層效果的實(shí)現(xiàn)及常見問題解決,使用CSS的預(yù)處理器框架SCSS寫起來比原生CSS會(huì)來得更加簡便一些,需要的朋友可以參考下2016-06-09css div實(shí)現(xiàn)的遮罩層完美兼容IE6-IE9 FireFox
css div 遮罩層想必熟悉網(wǎng)頁的朋友都不陌生吧，網(wǎng)上也有相關(guān)的實(shí)現(xiàn)文章，不過大都對(duì)瀏覽器的兼容性不好，在本文將為大家介紹的是一個(gè)可以兼容IE6-IE9 FireFox 的遮罩層，感2013-10-11
CSS實(shí)現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果
這篇文章主要介紹了CSS實(shí)現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-11-20
