CSS3制作奥运五环（带白色边框）--精简篇

最新推荐文章于 2022-05-26 23:36:45 发布

weixin_30449453

最新推荐文章于 2022-05-26 23:36:45 发布

阅读量250

点赞数

原文链接：http://www.cnblogs.com/wuLiuyang/p/4186655.html

版权

网上已经有有很多用CSS3写的奥运五环效果，但觉得写的有点乱，代码不够精简。所以今天整理了一下，写的可能不是很好，大神就秒过吧。

整体思路：1.用 li标签画出圆圈效果

　　　　　2.用 li:before画出圆圈外层圆边框

　　　　　3.用 li:after画出圆圈内层圆边框

Chrome运行效果截图

废话不多说了，上代码

<!DOCTYPE html>   
<html>   
 <head>   
     <meta charset="UTF-8" />   
     <title>The Olympic Flag</title>    
     <style type="text/css" media="screen">   
     body{
        background:tan;
     }

     .flag li{  
        position:absolute;  
         border-radius:6em;  
         border: solid 1em;  
         width: 10em;  
         height: 10em;  
         list-style-type:none;  
     }    
       
     .flag .blue   { z-index: 10; left: 0; top: 0; border-color: blue; }  
     .flag .yellow { z-index: 20; left: 6.8em;  top: 5.7em; border-color: yellow; }  
     .flag .black  { z-index: 21; left: 13.6em; top: 0; border-color: black; }  
     .flag .green  { z-index: 20; left: 20.4em; top: 5.7em; border-color: green; }  
     .flag .red    { z-index: 10; left: 27.2em; top: 0px; border-color: red; }     
       
     li:after{
        position:absolute;
        content:"";
        display:block;
        top:0em;
        left:0em;
        right:0em;
        bottom:0em;
        border:0.3em solid #eee;
        border-radius:6em;
     }      
     li:before{
        position:absolute;
        content:"";
        display:block;
        border:0.3em solid #eee;
        border-radius:12em;
        top:-1em;
        right:-1em;
        bottom:-1em;
        left:-1em;
     }
     /* 蓝色压住黄色 */    
     .flag .blue.alt { z-index: 24; }  
     .flag .blue.alt,.blue.alt:after,.blue.alt:before  
     {
         border-top-color: transparent;  
         border-left-color: transparent;  
         border-bottom-color: transparent;  
     }  
     /* 黄色压住黑色 */  
     .flag .yellow.alt { z-index: 23; }  
     .flag .yellow.alt,.yellow.alt:after,.yellow.alt:before
      {  
         border-right-color: transparent;  
         border-left-color: transparent;  
         border-bottom-color: transparent;  
     }      
     /* 绿色压住黑色  */  
     .flag .green.alt { z-index: 23; }  
     .flag .green.alt,.green.alt:after,.green.alt:before
     {  
         border-top-color: transparent;  
         border-right-color: transparent;  
         border-bottom-color: transparent;  
     }  
     /* 红色压住绿色  */  
     .flag .red.alt { z-index: 23; }  
     .flag .red.alt,.red.alt:after,.red.alt:before
    {  
         border-top-color: transparent;  
         border-right-color: transparent;  
         border-left-color: transparent;  
     }
     </style>     
 </head>   
 <body>   
    <ul class="flag">   
         <li class="blue"></li>   
         <li class="blue alt"></li>   
         <li class="yellow test"></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>     
 </body>   
</html>

转载于:https://www.cnblogs.com/wuLiuyang/p/4186655.html

weixin_30449453

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3制作奥运五环（带白色边框）--精简篇

网上已经有有很多用CSS3写的奥运五环效果，但觉得写的有点乱，代码不够精简。所以今天整理了一下，写的可能不是很好，大神就秒过吧。整体思路：1.用 li标签画出圆圈效果　　　　　2.用 li:before画出圆圈外层圆边框　　　　　3.用 li:after画出圆圈内层圆边框Chrome运行效果截图废话不多说了，上代码<!DOCTYPE html> ...
复制链接

扫一扫