css实现奥运五环图片特效

项目描述

css实现奥运五环效果

运行环境

浏览器

项目技术(必填)

css

是否原创(转载必填原文地址)

转载

项目截图(必填)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .s{width:100px ;
               height:100px;    
            border:10px solid red ;
            border-radius:100px ;
            
            
            }
            .s1{width:100px ;
               height:100px;    
            border:10px solid yellow ;
            border-radius:100px ;
            position: relative;
            left: 40px;
            bottom:50px ;
            }
            .s2{width:100px ;
               height:100px;    
            border:10px solid green ;
            border-radius:100px ;
            position: relative;
            left:80px;
            bottom:240px ;
            }
            .s3{width:100px ;
               height:100px;    
            border:10px solid blue ;
            border-radius:100px ;
            position: relative;
            left:120px;
            bottom:290px ;
            }
            .s4{width:100px ;
               height:100px;    
            border:10px solid aqua ;
            border-radius:100px ;
            position: relative;
            left:150px;
            bottom:480px ;
            }
        </style>
    </head>
    <body>
        <div class="s"></div>
        <div class="s1"></div>
        <div class="s2"></div>
        <div class="s3"></div>
        <div class="s4"></div>
        
    </body>
</html>

运行截图(必填)

注意事项(可选)

无

猜你喜欢

打赏

0个评论

0个牛币图片特效 CSS/CSS3