最终结果如下
HTML内容如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>彩色转圈圈</title> 9 <link rel="stylesheet" href="circle.css"> 10 </head> 11 12 <body> 13 <div id="outer"> 14 <div class="circle"></div> 15 </div> 16 </body> 17 18 </html>
CSS内容如下：
1 /*通配选择器初始化margin和padding*/
2 * {
3 margin: 0;
4 padding: 0;
5 /* 指定盒子模型的计算方式 */
6 box-sizing: border-box;
7 }
8
9 /* 当页面有且仅有一个元素的时候，建议的居中方案是使用 display 进行操作 */
10 #outer {
11 /* 当前为弹性盒子模型 */
12 display: flex;
13 /* 指定元素在主轴方向的对齐为center */
14 justify-content: center;
15 /* 指定元素在侧轴方向的对齐为center */
16 align-items: center;
17 /* 指定最小高度 : 目的是为了铺满屏幕，即屏幕多大，这个元素就多大 ， 可以使用单位 vh */
18 min-height: 100vh;
19 background: #012634;
20 /* 动画效果：名称 需要多久完成动画 动画的速度曲线 循环次数：无限循环 */
21 animation: change_color 5s linear infinite
22 }
23
24 @keyframes change_color {
25 to {
26 filter: hue-rotate(360deg);
27 /* 改变div整体颜色*/
28 }
29 }
30
31 .circle {
32 width: 150px;
33 height: 150px;
34 background: linear-gradient( to top, #022130 40%, #66ddee);
35 /* 使用边框的半径 */
36 border-radius: 50%;
37 /*绝对定位circle的位置，相对于其非static父元素（outer）定位*/
38 position: absolute;
39 animation: rotate 2s linear infinite
40 }
41
42 @keyframes rotate {
43 to {
44 /* 2D旋转360度 */
45 transform: rotate(360deg);
46 }
47 }
48
49 /* 使用伪元素进行生成内容 */
50 .circle::before {
51 content: "";
52 /*生成一个背景色与outer背景色相同的圆形来进行遮挡*/
53 background: #012634;
54 position: absolute;
55 inset: 10px 20px 0 0;
56 border-radius: 50%;
57 }
58
59 .circle::after {
60 content: "";
61 /*生成动画头部的小圆*/
62 position: absolute;
63 top: 50px;
64 right: -10px;
65 width: 40px;
66 height: 40px;
67 background: #66ddee;
68 border-radius: 50%;
69 /*加入阴影营造出发光效果*/
70 /*对同一个box（小圆）加入了多个阴影，用逗号隔开*/
71 /*x偏移量为0，y偏移量为0，模糊半径为5px，颜色为小圆背景色；后面以此类推*/
72 box-shadow: 0 0 5px #66ddee, 0 0 25px #66ddee, 0 0 50px #66ddee, 0 0 75px #66ddee;
73 }