首页 > 代码库 > CSS3实现的圆形遮罩手机应用效果实例
CSS3实现的圆形遮罩手机应用效果实例
<html>
<head>
<title>CSS3实现的圆形遮罩手机应用效果实例丨芯晴网页特效丨CsrCode.CN</title>
<style>
.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 {
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;
}
</style>
<script language="JavaScript">
(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);
</script>
</head>
<body>
<div class="test_outer">
<span id="testCover" class="test_cover test_cover_pos1 trans"></span>
<img src="http://www.mamicode.com/imagesforcode/201304/radius_cover_wap_bg.png" width="320" height="480" border="0" />
</div>
</body>
</html>
<br><font color=black>▲ 目前IE8及以前版本不兼容CSS3，请使用IE9/火狐/Chrome浏览器运行本效果。<br><hr><p align="center">本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</p></font>