前段实现奥运五环
CSS代码部分
body {
transform-style: preserve-3d;
}
.circle {
border-radius: 50%;
height: 80px;
width:80px;
display: inline-block;
position: relative;
border-width: 10px;
border-style: solid;
}
.circle1 {
border-color: red;
transform: rotateY(-1deg);
}
.circle2 {
border-color: blue;
transform: rotateY(-1deg);
}
.circle3 {
border-color: green;
transform: rotateY(-1deg);
}
.circle4 {
top: -60px;
left: 53px;
transform: rotateY(1deg);
}
.circle5 {
top: -60px;
left: 53px;
border-color: gold;
transform: rotateY(1deg);
}
//HTML代码