[css] 用css画一个太阳

[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);
    }


  

    

    

    

    

    

    

    

    

  

个人简介

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

主目录

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