一、思路分析
1.首先构造很多嵌套的圆，给整体添加一个动画，由于时间相同，圆圈的大小不同，故转速不同呈现万花筒的旋转效果；
2.添加彩色线条
这里若是直接使用border来做，就会出现中间厚，两边窄的效果，
所以需要使用before以及after插入下上边框形成等厚度的彩色线条效果；
语法：
选择器：before{
content:” ”; //插入的内容
}
选择器：after{
content:” ”; //插入的内容
}
利用before插入上边框，是指设置全边框，但只给上边框设置颜色，其他边框为透明色；(after一样)
.are:before{
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
top: -4px;
left: -4px;
border: 4px solid ;
border-radius: 50%;
border-color: #3cb5ff transparent transparent transparent;
content: "";
}
3.构造同心圆圈时，最好使用百分比，每次基于外圈的百分比缩小，这样减少了样式重复
4.补充一点：当对before/after进行hover操作时，需要修改before/after之前为双冒号::
例如： .lin_1:before{
width: 0;
height: 0;
display: block;
position: absolute;
top: 0;
left: -6px;
border: 3px solid #2cdaff;
content: "";
transition: all 0.5s linear;
}
.bol:hover .lin_1::before{
width: 100%;
}
二、完整代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋涡</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
overflow: hidden;
background-color: black;
}
.bol{
width: 400px;
height: 400px;
margin: 200px auto;
transition: all 3s;
}
.are{
width: 85%;
height: 85%;
border: 1px solid silver;
margin: 7.5%;
border-radius: 50%;
position: relative;
animation: xuanzhuan 5s linear infinite;
}
.bol:hover{
transform: scale(1.2); //悬停放大
}
.are:before{
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
top: -4px;
left: -4px;
border: 4px solid ;
border-radius: 50%;
border-color: #3cb5ff transparent transparent transparent;
content: "";
}
.are:after{
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
top: -4px;
left: -4px;
border: 4px solid ;
border-radius: 50%;
border-color: transparent transparent #ff6f70 transparent ;
content: "";
}
@keyframes xuanzhuan {
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="bol">
<div class="are">
<div class="are">
<div class="are">
<div class="are">
<div class="are">
<div class="are">
<div class="are">
<div class="are">
<div class="are">
<div class="are">
<div class="are">
<div class="are">
<div class="are">
<div class="are"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>