思路：
1.首先构建五个环：把一个正方形用border-radiu设置成圆形，border控制环的宽度，五环的各自的div的top和left控制位置，使形成五环的样子。
2.运用伪元素的，用 z-index控制优先级， border-*-color: transparent;控制透明。
由于有限级都是一样的，所有前面的显示。控制透明的就可以显示出下面的元素，所以把1的下，2左，3左，5的上又透明，从而构成两两相扣。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*使用伪元素实现五环两两相扣*/
.aoyun{
/*
使div在屏幕中央，不随屏幕移动
*/
position: fixed;
top: 50%;
left: 50%;
margin-left:-350px;
margin-top: -140px;
690px;
height: 330px;
background-color: bisque;
opacity: 0.5;
}
.a1,.a2,.a3,.a4,.a5{
200px;/**/
height: 200px;
border: 10px solid;
border-radius: 50%;
position: absolute;
}
.a1::after,.a2::after,.a3::after,.a4::after,.a5::after{
200px;
height: 200px;
border: 10px solid;
border-radius: 50%;
position: absolute;
content: "";
left: -10px;
top:-10px;
}
.a1{
border-color: blue;
top:0;
left: 0;
}
.a1::after{
border-color: blue;
z-index: 1;
border-bottom-color: transparent;/*使的下半部分为透明，从而显示出来下面的元素*/
}
.a2{
border-color: black;
top:0;
left: 230px;
}
.a2::after{
border-color: black;
z-index: 1;
border-left-color: transparent;
}
.a3{
border-color: red;
top:0;
left: 460px;
}
.a3::after{
border-color: red;
z-index: 1;
border-left-color: transparent;
}
.a4{
border-color: yellow;
top:110px;
left: 110px;
}
.a4::after{
border-color: yellow;
}
.a5{
border-color: green;
top:110px;
left: 340px;
}
.a5::after{
border-color: green;
z-index: 1;
border-top-color: transparent;
border-right-color: transparent;
}
</style>
</head>
<body>
<div class="aoyun">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div>
</div>
</body>
</html>