一、思路分析
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>