![](https://i-blog.csdnimg.cn/blog_migrate/a37ef652a3a9184244f97a635b7b50bc.png)
一、思路分析
1.首先构造很多嵌套的圆,给整体添加一个动画,由于时间相同,圆圈的大小不同,故转速不同呈现万花筒的旋转效果;
2.添加彩色线条
这里若是直接使用border来做,就会出现中间厚,两边窄的效果,
![](https://i-blog.csdnimg.cn/blog_migrate/090060497aefe6dca00f0ed17d87f454.png)
所以需要使用before以及after插入下上边框形成等厚度的彩色线条效果;
语法:
选择器:before{
content:” ”; //插入的内容
一、思路分析
1.首先构造很多嵌套的圆,给整体添加一个动画,由于时间相同,圆圈的大小不同,故转速不同呈现万花筒的旋转效果;
2.添加彩色线条
这里若是直接使用border来做,就会出现中间厚,两边窄的效果,
所以需要使用before以及after插入下上边框形成等厚度的彩色线条效果;
语法:
选择器:before{
content:” ”; //插入的内容