用css写一个有趣的奥运五环~。

Love The Way You Lie 2022-03-30 15:38 409阅读 0赞

用css实现奥运五环样式，并且于页面居中显示，不随页面滚动条而移动，一直处于居中位置。

html代码部分就一个div里边包含5个div。代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    
        
    <style>
             
     div.main{
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -190px;
        margin-top: -95px;
    
    }
    
    div.cir1{
        width: 100px;
        height: 100px;
        border:10px solid #00f;
        border-radius: 50%;
        z-index: 1;
        position: relative;
    }
    
    div.cir2{
        width: 100px;
        height: 100px;
        border: 10px solid #ff0;
        border-radius: 50%;
        z-index: 2;
        position: absolute;
        left: 60px;
        top: 50px;
    }
    
    div.cir3{
        width: 100px;
        height: 100px;
        border: 10px solid #000;
        border-radius: 50%;
        z-index: 1;
        position: absolute;
        left: 130px;
        top: 0px;
    }
    
    div.cir4{
        width: 100px;
        height: 100px;
        border: 10px solid #0f4;
        border-radius: 50%;
        z-index: 1;
        position: absolute;
        left:200px;
        top:50px;
    }
    
    div.cir5{
        width: 100px;
        height: 100px;
        border: 10px solid #f00;
        border-radius: 50%;
        z-index: 2;
        position: absolute;
        left: 260px;
        top: 0px;
    } 
    
        </style>    
    
    </head>
    <body>
          
       <div class="main">  
            <div class="cir1"></div>
            <div class="cir2"></div>
            <div class="cir3"></div>
            <div class="cir4"></div>
            <div class="cir5"></div>
        </div>  
       
    
    </body>
    </html>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70]: /images/20220330/92a80612d54d4085ae8a56be92b8851f.png