巧用CSS3 border實(shí)現(xiàn)圖片遮罩效果代碼
發(fā)布時間：2012-04-09 22:51:57 作者：佚名 
我要評論
我要評論巧用CSS3 border實(shí)現(xiàn)圖片遮罩效果代碼，需要的朋友可以參考下
復(fù)制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
.trans {
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
}
.test_outer {
display: block;
width: 200px;
height: 200px;
margin: 1em auto;
position: relative;
overflow: hidden;
}
.test_cover {
width: 40px;
height: 40px;
border: 200px solid rgba(0, 0, 0, .35);
border-radius: 50%;
position: absolute;
left: -115px;
top: -165px;
}
.test_cover:hover {
width: 140px;
height: 140px;
left: -170px;
top: -165px;
}
.test_cover:hover:after {
content: "秋思-一葉知秋！";
text-align:center;
margin:55px 0 0 12px;
color: #fff;
font: bold 16px/1.2 '微軟雅黑';
text-shadow: 1px 1px rgba(0, 0, 0, .35);
position: absolute;
}
</style>
</head>
<body>
<a href="#" class="test_outer">
<span class="test_cover trans"></span>
<img src="http://img.jb51.net/data/avatar/000/00/64/47_avatar_middle.jpg" width="200" height="200" />
</a>
</body>
</html>
其實(shí)現(xiàn)原理是利用個border偌大的半透明邊框?qū)傩裕╠emo中邊框?qū)挾?00像素），邊框顏色為rgba黑色半透明，然后50%圓角。再用用定位把它覆蓋在圖片上面。
主要核心代碼:
復(fù)制代碼
代碼如下:.test_cover {
width: 40px;
height: 40px;
border: 200px solid rgba(0, 0, 0, .35);
border-radius: 50%;
position: absolute;
left: -115px;
top: -165px;
}
然后外面再用個父容器把它溢出隱藏掉就可以了
復(fù)制代碼
代碼如下:.test_outer {
display: block;
width: 200px;
height: 200px;
margin: 1em auto;
position: relative;
overflow: hidden;
}
就這么簡單....
相關(guān)文章
CSS實(shí)現(xiàn)鼠標(biāo)懸浮出現(xiàn)遮罩層示例源碼
這篇文章給大家分享了兩個鼠標(biāo)懸浮出現(xiàn)說明遮罩層的效果，大家可以根據(jù)自己的需要選擇某一種效果，兩種效果文中都給出了實(shí)例代碼，下面來一起看看吧。2016-09-05SCSS移動端頁面遮罩層效果的實(shí)現(xiàn)及常見問題解決
這篇文章主要介紹了SCSS移動端頁面遮罩層效果的實(shí)現(xiàn)及常見問題解決,使用CSS的預(yù)處理器框架SCSS寫起來比原生CSS會來得更加簡便一些,需要的朋友可以參考下2016-06-09- 這篇文章主要介紹了使用CSS實(shí)現(xiàn)中間鏤空的圖片遮罩效果的方法,文中同時附帶介紹了一個用CSS3實(shí)現(xiàn)的鏤空一個圓形的代碼示例,需要的朋友可以參考下2015-12-24
css3實(shí)現(xiàn)圖片遮罩效果鼠標(biāo)hover以后出現(xiàn)文字
鼠標(biāo)hover 以后，圖片上面出現(xiàn)一個遮罩透明度變化，顯示設(shè)置好的文字，完全使用css 實(shí)現(xiàn)，效果如下，喜歡的朋友可以參考下2013-11-05css div實(shí)現(xiàn)的遮罩層完美兼容IE6-IE9 FireFox
css div 遮罩層想必熟悉網(wǎng)頁的朋友都不陌生吧，網(wǎng)上也有相關(guān)的實(shí)現(xiàn)文章，不過大都對瀏覽器的兼容性不好，在本文將為大家介紹的是一個可以兼容IE6-IE9 FireFox 的遮罩層，感2013-10-11利用js+css簡單實(shí)現(xiàn)半透明遮罩彈窗
用到遮罩彈窗時在網(wǎng)上搜索，看到絕大多數(shù)都是基于Jquery的。我不想用那么復(fù)雜的應(yīng)用，于是自己寫了一個。2011-07-27- css 遮罩樣式（支持IE和FireFox） ，需要的朋友可以參考下。2011-01-27
- 這篇文章主要介紹了CSS3 mask 遮罩的具體使用方法，詳細(xì)的介紹了CSS3 mask 遮罩的具體使用，具有一定的參考價值，有興趣的可以了解一下2017-11-03