CSS3 圆形遮罩效果

2020-01-27 14:16:55

字体：大中小

来源：转载

供稿：网友

CSS3下的圆形遮罩效果制作的手要应用界面，CSS3学习教程示例。列举一个CSS3实例，并让阅读的朋友了解该技术在实际项目中的应用。因为是CSS3，所以IE6_IE8可以“打酱油”了。请浏览者使用火狐或Chrome等浏览器。

<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="/d/file/p/2020/01-27/370e79f5b24c30fa0ac755b9698dc24e.png" width="320" height="480" border="0" /></div></body></html>

上一篇：CSS3文字立体效果

下一篇：css3进度条

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注