`
chunzhisu
  • 浏览: 12616 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
ptkr
yaweja
社区版块
存档分类
最新评论

CSS3实现的圆形遮罩手机应用效果实例

 
阅读更多 
<html>
<head>
<title>CSS3实现的圆形遮罩手机应用效果实例</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="/imagesforcode/201304/radius_cover_wap_bg.png" width="320" height="480" border="0" />
</div>
</body>
</html>

 

分享到：
| 超酷的CSS3动画遮罩效果的图片文字说明
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics