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> 相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18