小tip:CSS3下的圓形遮罩效果實現與應用
阿新 • • 發佈:2018-12-25
因為是使用純潔的CSS3實現,因此,IE6~8瀏覽器又將被侵豬籠。
看一下效果:
HTML程式碼:
<a href="#" class="test_outer">
<span class="test_cover trans"></span>
<img src="wuluqiaola.jpg" width="521"> // 嗯 圖片寄幾替換
</a>
CSS程式碼:
* {
padding: 0;
margin: 0;
}
.trans {
/*transition*/
-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: 512px;
height: 381px;
margin: 1em auto;
position: relative;
overflow: hidden;
}
.test_cover {
width : 100px;
height: 100px;
border: 512px solid rgba(0, 0, 0, .35);
border-radius: 50%;
position: absolute;
left: -197px;
top: -465px;
}
.test_cover:hover {
width: 150px;
height: 150px;
left: -207px;
top: -490px;
}
.test_cover:hover:after {
content: "看,美男!";
margin : 50px 0 0 -30px;
color: #fff;
font: bold 20px/1.2 '微軟雅黑';
text-shadow: 1px 1px rgba(0, 0, 0, .35);
position: absolute;
}
原理
雖說效果離不開CSS3,但,最最關鍵的核心屬性是CSS border屬性,偌大的半透明邊框屬性(demo中邊框寬度512畫素),邊框顏色為rgba黑色半透明,然後50%圓角。
相關CSS程式碼:
.test_cover {
width: 100px;
height: 100px;
border: 512px solid rgba(0, 0, 0, .35);
border-radius: 50%;
position: absolute;
left: -197px;
top: -465px;
}
很簡單吧,然後父標籤來個尺寸限制,溢位隱藏就完事大吉了。
實際應用
由於本效果是CSS驅動的,因此對於PC瀏覽器,目前還無法投入實際應用,但是,如果針對Android或是iphone、ipad等裝置開發頁面,該技術就可以有實際的應用了。
應用背景如下:
當我們退出一款新的產品的時候,所有的使用者都是new user,他們面對一個新穎陌生的產品,肯定會有一些不熟悉的地方,此時,一個善意的引導與說明就很有必要。既可以展示產品的優點,又方便使用者上手操作。
此時,我們可以嘗試使用遮罩效果(可以將使用者的注意力focus在一點上)來做引導提示,體驗會很舒服。
demo展示GIF:
CSS程式碼:
.trans {
/*transition*/
-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 {
width: 320px;
height: 480px;
margin: 1em auto;
position: relative;
overflow: hidden;
}
.test_cover {
width: 60px;
height: 60px;
border: 480px solid rgba(0, 0, 0, .45);
border-radius: 50%;
position: absolute;
}
.test_cover_pos1 {
left: -227px;
top: -478px;
}
.test_cover_pos1:after {
content: '☺首先選擇您所在的城市';
margin: 16px 0 0 -140px;
}
.test_cover_pos2 {
left: -447px;
top: -378px;
}
.test_cover_pos2:after {
width: 140px;
content: '☺全新推圖訂餐服務,給你不一樣的體驗!';
margin: 16px 0 0 60px;
}
.test_cover_pos3 {
left: -337px;
top: -48px;
}
.test_cover_pos3:after {
content: '☺隨時撥打訂餐!';
margin: -20px 0 0 -20px;
white-space: nowrap;
}
.test_cover_pos1:after, .test_cover_pos2:after, .test_cover_pos3:after {
color: #fff;
font-family: '微軟雅黑';
text-shadow: 1px 1px rgba(0,0,0,.35);
position: absolute;
}
HTML程式碼:
<div class="test_outer">
<span id="testCover" class="test_cover test_cover_pos1 trans"></span>
<img src="/study/image/radius_cover_wap_bg.png" width="320" height="480" border="0" />
</div>
JS:
(function(stepIndex) {
var objStep = document.getElementById("testCover");
var funStep = function() {
objStep.className = objStep.className.replace(/\d/, (stepIndex + 1));
stepIndex++;
if (stepIndex > 2) {
stepIndex = 0;
}
setTimeout(funStep, 3000);
};
setTimeout(funStep, 3000);
})(1);
原理與上面的簡單demo一直,多的就是用指令碼做定時播放了哈!demo頁面有完整的程式碼展示,這裡就不平白撐篇幅了。
關於浸豬籠的瀏覽器:
IE瀏覽器實際上也是可以實現類似的效果的,這裡的類似是指同樣可以實現中間鏤空,四周半透明的遮罩(濾鏡,你懂的);至於圓角效果,如果你精力足夠,也是可以折騰出來的(VML等,你懂的)。不過個人觀點沒必要過多折騰,精力有限,應該放在更重要的事情上。
跟張鑫旭部落格學習