夏天到了，一起来画个太阳吧

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

炎炎夏日马上就要到了，在这个还不算太热的日子里，给大家画一个太阳，希望这个夏天凉快多一点，开心多一点，西瓜甜一点，对我们好一点，好啦，下面就开始画咱们的太阳吧

正文

第一步

我们需要画出一个圆，代表太阳的主要轮廓

<div class="circle">
</div>

.circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  top: 50px;
  left: 50px;
  background-color:orange;
}

画出一个圆的关键点就是 border-radius: 50%,同时还需要设置relative，保证内圆在其内部

第二步

我们还需要画一个内圆，其半径要稍小于外圆，并放在外圆的中间，从而间接形成一个环状

<div class="circle">
  <div class="inner-circle"></div>
</div>

.circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  top: 50px;
  left: 50px;
  background-color:orange;
}
.inner-circle {
  width: 90px;
  height: 90px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

第三步

画出太阳的各个方向的光线

<div class="circle">
  <div class="inner-circle"></div>
  <div class="light"></div>
  <div class="light light1"></div>
  <div class="light light2"></div>
  <div class="light light3"></div>
  <div class="light light4"></div>
  <div class="light light5"></div>
  <div class="light light6"></div>
  <div class="light light7"></div>
  <div class="light light8"></div>
  <div class="light light9"></div>
  <div class="light light10"></div>
  <div class="light light11"></div>
  <div class="light light12"></div>
  <div class="light light13"></div>
  <div class="light light13"></div>
</div>

.circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  top: 50px;
  left: 50px;
  background-color:orange;
}
.inner-circle {
  width: 90px;
  height: 90px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.light {
  width: 6px;
  height: 30px;
  background-color: orange;
  position: absolute;
  top: -35px;
  left: 50%;
  transform-origin: 0 90px;
}
.light1 {
  transform: rotate(25deg);
}
.light2 {
  transform: rotate(50deg);
}
.light3 {
  transform: rotate(75deg);
}
.light4 {
  transform: rotate(100deg);
}
.light5 {
  transform: rotate(125deg);
}
.light6 {
  transform: rotate(150deg);
}
.light7 {
  transform: rotate(175deg);
}
.light8 {
  transform: rotate(200deg);
}
.light9 {
  transform: rotate(225deg);
}
.light10 {
  transform: rotate(250deg);
}
.light11 {
  transform: rotate(275deg);
}
.light12 {
  transform: rotate(300deg);
}
.light13 {
  transform: rotate(325deg);
}
.light14 {
  transform: rotate(350deg);
}

这一步的关键点是设置transform-origin，使其成为内圆的圆心，然后再进行rotate旋转，通过指定不同的角度，最终就可以画出各个方向的光线了,效果图如下

感兴趣的掘友可以通过链接查看哦!