欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 >建站经验 >Css&Div > CSS3绘制的奥运五环

CSS3绘制的奥运五环

2018-08-31 145 收藏 0 赞一个 0 真差劲 0 去评论

CSS3绘制漂亮的网页奥运五环,还带有渐变效果,有金属质感的连环5环,看上去十分漂亮,本效果基于CSS3技术,因此IE8及以下版本都将看不到效果,最后使用火狐或Chrome浏览器,或Opera浏览器。

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3绘制的奥运五环</title>  
<style type="text/css"> 
body{
        margin:20px;
        background-color:#fff;
}
ul.flag{
        list-style-type:none;
        position: relative;
        margin: 20px auto;
        z-index:1;
        top:30px;
        left:30px;
} 
.flag li,  .flag li:after{
        -webkit-border-radius: 6em;
        -moz-border-radius: 6em;
        border-radius: 6em;
        position: absolute;
}
.flag li{
        width: 12em;
        height: 12em;
        left: 0;
        top: 0;
        font-size: 1em;
}  
.flag li:after{
        display: block;
        content: "";
        top: -0.1em;
        left: -0.1em;
        right: -0.1em;
        bottom: -0.1em;
        border: solid 1.4em black;
}
.flag .blue{ 
        z-index: 10;
        left: 0;
        top: 0;
}
.flag .yellow { z-index: 20; left: 6.8em;  top: 5.7em; }
.flag .black  { z-index: 21; left: 13.6em; top: 0; }
.flag .green  { z-index: 20; left: 20.4em; top: 5.7em; }
.flag .red    { z-index: 10; left: 27.2em; top: 0px; }   
.flag .blue:after{ 
        border-color: blue;
        -webkit-box-shadow:-4px -2px 2px #00007f;
        -moz-box-shadow:-4px -2px 2px #00007f;
        -o-box-shadow:-4px -2px 2px #00007f;
        box-shadow:-4px -2px 2px #00007f;
}   
.flag .yellow:after{
        border-color: yellow;
        -webkit-box-shadow:-4px -2px 2px #808000;
        -moz-box-shadow:-4px -2px 2px #808000;
        -o-box-shadow:-4px -2px 2px #808000;
        box-shadow:-4px -2px 2px #808000;
} 
.flag .black:after{
        border-color: black;
        -webkit-box-shadow:-0px -4px 2px #808080;
        -moz-box-shadow:0px -4px 2px #808080;
        -o-box-shadow:0px -4px 2px #808080;
        box-shadow:0px -4px 2px #808080;
}
.flag .green:after{
        border-color: green;
        -webkit-box-shadow:4px -2px 2px #001000;
        -moz-box-shadow:4px -2px 2px #001000;
        -o-box-shadow:4px -2px 2px #001000;
        box-shadow:4px -2px 2px #001000;
} 
.flag .red:after{
        border-color: red;
        -webkit-box-shadow:4px -2px 2px #800000;
        -moz-box-shadow:4px -2px 2px #800000;
        -o-box-shadow:4px -2px 2px #800000;
        box-shadow:4px -2px 2px #800000;
}
.flag .blue.alt { z-index: 24; }
.flag .yellow.alt,
.flag .green.alt,
.flag .red.alt{ z-index: 23; }
.flag .blue.alt:after {
/* 让黄色压住蓝色 */ 
border-bottom-color: transparent;
}
.flag .yellow.alt:after {
/* 让黑色压住黄色 */
border-right-color: transparent;
}    
.flag .green.alt:after {
/* 让黑色压住绿色  */
border-top-color: transparent;
}
.flag .red.alt:after {
/* 让绿色压住红色 */
border-left-color: transparent;
} 
/*高光*/
div.light{
        position: relative;
        width:50em;
        height:25em;
        background:-webkit-linear-gradient(left top,rgba(255, 255,255,0),rgba(255, 255, 255,0.7),rgba(255, 255, 255,0),rgba(255, 255, 255,0.9),rgba(255, 255, 255,0),rgba(255, 255, 255,0.9),rgba(255, 255, 255,0),rgba(255, 255, 255,0.7),rgba(255, 255, 255,0));
        background:-moz-linear-gradient(left top,rgba(255, 255,255,0),rgba(255, 255, 255,0.7),rgba(255, 255, 255,0),rgba(255, 255, 255,0.9),rgba(255, 255, 255,0),rgba(255, 255, 255,0.9),rgba(255, 255, 255,0),rgba(255, 255, 255,0.7),rgba(255, 255, 255,0));
        background:-o-linear-gradient(left top,rgba(255, 255,255,0),rgba(255, 255, 255,0.7),rgba(255, 255, 255,0),rgba(255, 255, 255,0.9),rgba(255, 255, 255,0),rgba(255, 255, 255,0.9),rgba(255, 255, 255,0),rgba(255, 255, 255,0.7),rgba(255, 255, 255,0));
        background:linear-gradient(left top,rgba(255, 255,255,0),rgba(255, 255, 255,0.7),rgba(255, 255, 255,0),rgba(255, 255, 255,0.9),rgba(255, 255, 255,0),rgba(255, 255, 255,0.9),rgba(255, 255, 255,0),rgba(255, 255, 255,0.7),rgba(255, 255, 255,0));
        top:0;
        left:0;
        z-index:2;
}      
</style>   
</head> 
<body> 
        <ul class="flag"> 
                <li class="blue"></li> 
                <li class="blue alt"></li> 
                <li class="yellow"></li> 
                <li class="yellow alt"></li> 
                <li class="black"></li> 
                <li class="green"></li> 
                <li class="green alt"></li> 
                <li class="red"></li> 
                <li class="red alt"></li> 
        </ul>
        <div class="light"></div>  
</body> 
</html>

效果如图:

QQ截图20180831111531.jpg

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站所有资源(包括模板、素材、软件、字体等)仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论
分享是个好习惯