首页 > 代码库 > 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>