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

就今天，天气32度，公司中央空调不给开，严重影响到了我划水摸鱼的质量，导致我是在浑浑噩噩中度过了一下午，最要感谢我对面的sx开个小风扇嗡嗡响，我真的会谢！

古有帝俊与羲和生10个太阳为祸世间，今有我阿荣人造太阳！开干！

简简单单的用css来实现一个太阳的特效吧，我们先来理一下设计思路，应该先画出一个圆，然后设计他散发的光线。那先简单的画个圆吧：

<style type="text/css">
    #sun {
     margin:150px;
     background-color:#f90;color:#fe4;
     width:200px;height:200px;
     border-radius:50%;
     position:relative;
    }
</style>


<div id="sun">
  <div class="sunny"></div>
</div>
复制代码

这里定义了一个宽200px高200px的正方形，并通过圆角属性将其变成一个圆形：

实现圆形四周的“光线”有很多方法，这里主要通过阴影属性实现：

#sun:before {
 content:" ";
 width:50px;height:20px;margin:auto;
 position:absolute;left:0;right:0;top:0;bottom:0;
 border-radius:15px;
 box-shadow:150px 0px 0 1px currentColor,-150px 0 0 1px currentColor;
}
复制代码

这里定义了一个宽50px高20px的小矩形的“光线”图案，将其定位到圆形的中间，并通过阴影属性在圆形的左边和右边分别“复制”一份该图案，再设置圆角装饰，便得到左右两道“太阳光”：

同样的方法，还可以通过伪类在垂直方向再实现两道“太阳光”：

#sun:after {
 content:" ";
 width:20px;height:50px;margin:auto;
 position:absolute;left:0;right:0;top:0;bottom:0;
 border-radius:15px;
 box-shadow:0px 150px 0 1px currentColor,0 -150px 0 1px currentColor;
}
复制代码

这样以来，上下左右的四道光线就做好了：

接下来通过类似的方法，设置45度和135度方向的几条光线，可以这么做：

.sunny {
 position:absolute;left:0;right:0;top:0;bottom:0;
 width:20px;height:50px;margin:auto;
 transform:rotate(45deg);
 border-radius:15px;
 box-shadow:0px 150px 0 1px currentColor,0 -150px 0 1px currentColor;
}
.sunny:after {
 content:" ";
 position:absolute;
 width:20px;height:50px;margin:auto;
 transform:rotate(90deg);
 border-radius:15px;
 box-shadow:0 150px 0 1px currentColor,0 -150px 0 1px currentColor;
}
复制代码

这里将子元素以相似的方法定义了其他的几道光线，在子元素和其伪元素上分别旋转45度和90度刚好就是相应的位置，于是整个太阳的图案就做好了：

顺便给它来个旋转的动画吧

@keyframes run {
 to {transform:rotate(360deg);}
}
#sun {animation:run 30s linear infinite;}
复制代码

ok,复制10个！

效果展示