[css] 用css画一个太阳

// css.sun {margin: 200px;width: 200px;height: 200px;border-radius: 50%;background: red;box-shadow: 0 0 21px #fe9e9e;position: relative;}// ::before & ::after  辅助.sun::before {width: 0;height: 500px;content: '';border-left: 1px solid blue;position: absolute;top: -150px;left: 100px;z-index: 100;transform: rotate(45deg);}.sun::after {width: 500px;height: 0;content: '';border-top: 1px solid blue;position: absolute;top: 100px;left: -150px;z-index: 100;transform: rotate(45deg);}// 光线的宽高据 sun-body 而动.sun-light {width: 100px;height: 6px;background: yellow;position: absolute;left: 0;top: 0;}.sl1 {left: 50px;top: -58px;transform: rotate(90deg);}.sl2 {top: -14px;left: 160px;transform: rotate(-45deg);}.sl3 {top: 97px;left: 205px;}.sl4 {top: 206px;left: 160px;transform: rotate(45deg);}.sl5 {top: 252px;left: 50px;transform: rotate(90deg);}.sl6 {top: 206px;left: -60px;transform: rotate(-45deg);}.sl7 {top: 97px;left: -105px;}.sl8 {top: -14px;left: -60px;transform: rotate(45deg);}<!-- html --><div class="sun"><div class="sun-light sl1"></div><div class="sun-light sl2"></div><div class="sun-light sl3"></div><div class="sun-light sl4"></div><div class="sun-light sl5"></div><div class="sun-light sl6"></div><div class="sun-light sl7"></div><div class="sun-light sl8"></div></div>

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题