加个小方块html,五环.html · sean/css写的跳动小方块 - Gitee.com

Document

* {

margin: 0px;

padding: 0px;

}

ul{

list-style: none;

display: flex;

position: relative;

}

li{

height:12em ;

width: 12em;

position: absolute;

z-index: 10;

}

li::after{

content: "";

height: 100%;

width: 100%;

border: red 20px solid;

display: block;

border-radius: 50%;

box-sizing: border-box;

}

li.blue{

top:0em;

left:0em;

}

li.blue::after{

border-color: blue;

}

li.blue.new{

z-index: 30;

}

li.blue.new::after{

border-color: blue blue transparent blue;

}

li.yellow{

top:5.7em;

left:6.8em;

}

li.yellow::after{

border-color: yellow;

}

li.yellow.new{

z-index: 25;

}

li.yellow.new::after{

border-color:yellow transparent yellow yellow ;

}

li.black{

top:0em;

left:13.6em;

}

li.black::after{

border-color: black;

}

li.green{

top:5.7em;

left:20.4em;

z-index: 9;

}

li.green::after{

border-color: green ;

}

li.green.new{

z-index: 15;

}

li.green.new::after{

border-color: transparent green green green;

}

li.red{

top:0em;

left:27.2em;

z-index: 11;

}

li.red::after{

border-color: red;

}

li.red.new::after{

border-color:red red transparent red ;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史