CSS制作梦幻彩虹效果

2020-05-11 18:04:13易采站长站整理

            margin-top: 10px;   
            margin-left: 10px;   
            display: block;   
            width: 380px;   
            height: 380px;   
            border: solid #ffff00 10px;   
            border-radius: 100%;   
            box-sizing: border-box;   
            content: "";   
        }   
        .box2{   
            float: left;   
            margin-top: -180px;   
            margin-left: 20px;   
            width: 360px;   
            height: 180px;   
            overflow: hidden;   
        }   
        .box2::before{   
            float: left;   
            display: block;   
            margin: 0;   
            width: 360px;   
            height: 360px;   
            border-radius: 100%;   
            border: solid 10px #ff0000;   
            box-sizing: border-box;   
            content: "";   
        }