听说，夏天和绿色的太阳更配哦---css绿色太阳我正在参加码上掘金体验活动，详情：show出你的创意代码块一起养成写

我正在参加码上掘金体验活动，详情：show出你的创意代码块一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。

听说，后羿见了这8个绿色的太阳转的，都摇了摇头。这个代码是什么样子的呐，展示的效果如下

代码展示

html

一开始想画一个小太阳，但是一个小太阳怎么够后羿去舍掉呐，所以变成了8个太阳，夏天正好也到了，后羿射着玩一定很有趣

div部分，重复画了8个太阳【要是可以写for循环就最好了】，用到的知识点也比较简单，div盒子，class选择器，重复一样的代码

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />

	</head>
            <body>
               /*这部分代码×8*/
		<div class="container">
			<div class="box sunshine">/*class选择器*/
				<div class=sunny>
					<div class="light"></div>
				</div>
			</div>
			





		</div>

	</body>
</html>

css

css部分用到了伪类选择器，flex布局，animation动画（也就是后羿看了都摇头的部分），@keyframes规则创建动画，对光的控制，具体的内容在代码的注释中了~

* {
	--color: #B9DEFF;
	--sunnyColor: #83cbac;
	--inner: #fff;
	--outer: #00A6B0;
}

body {
	/* flex布局 */
	display: flex;
	height: 90vh;
	background: radial-gradient(var(--inner), var(--outer));
	/* div外的元素有留白 */
	justify-content: center;
	/* 居中对齐弹性盒的元素 */
	align-items: center;
}

.container {
	width: 700px;
	font-size: 0;
}

.box {
	display: inline-block;
	width: 200px;
	height: 200px;
	box-sizing: border-box;
	position: relative;
}

.sunny {
	position: absolute;
	/* 经典圆形又登场了 */
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--sunnyColor);
	top: 50%;
	left: 50%;
	margin-top: -10px;
	margin-left: -10px;
	color: var(--sunnyColor);
	box-shadow: 0 0 0 7px;
	/* 太阳的光芒旋转的时间 */
	animation: spin 1s infinite linear;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.lights {
	position: absolute;
	width: 6px;
	height: 18px;
	background-color: var(--inner);
	top: -32px;
	left: 50%;
	margin-left: -3px;
	border-radius: 4px;
	box-shadow: 0px 86px;
}
给与light属性
.light {
	position: absolute;
	width: 6px;
	height: 18px;
	background-color: var(--sunnyColor);
	top: -32px;
	left: 50%;
	margin-left: -3px;
	border-radius: 4px;
	box-shadow: 0px 86px;
}
伪类选择器的部分，给与light属性
.light::before,
.light::after {
	content: '';
	position: absolute;
	width: 6px;
	height: 18px;
	background-color: var(--sunnyColor);
	transform: rotate(60deg);
	transform-origin: 3px 52px;
	box-shadow: 0px 86px;
	border-radius: 4px;
}

.light::after {
	transform: rotate(120deg);
}

代码思路

首先是先画出一个圆，一个圆要想发光，就要在外面制作光束，使用keyframes属性就可以完成，想让这些小光束呈现转动的效果，这里使用伪类选择器，赋予light属性，让整个小太阳转动起来。那么问题来了，一个小太阳体现不出其独特性，那么咱们就来9个太阳，在炎炎夏天，后羿看了都摇起了头。