CSS制作梦幻彩虹效果

        .box2::after{   
            display: block;   
            margin-top: 10px;   
            margin-left: 10px;   
            width: 340px;   
            height: 340px;   
            border-radius: 100%;   
            border: solid 10px #ffff00;   
            box-sizing: border-box;   
            content: "";   
        }   
        .box3{   
            margin-top: -160px;   
            margin-left: 40px;   
            width: 340px;   
            height: 160px;   
            overflow: hidden;   
        }   
        .box3::before{   
            float: left;   
            display: block;   
            width: 320px;   
            height: 320px;   
            border: solid 10px blue;   
            border-radius: 100%;   
            box-sizing: border-box;   
            content: "";   
        }    
  

效果：