奥运五环是很经典的存在,现在用代码写一遍。
重点在于,第二行的环和第一行并不是直接覆盖叠加,而是互相环绕。
主要是transform: rotateY()的作用;
//HTML代码
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
<br>
<div class="circle circle4"></div>
<div class="circle circle5"></div>
//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);
}
以上,实现奥运五环的方法很多,仅供参考。