Fe-interview: [css] 第60天 用css画一个太阳

Created on 14 Jun 2019  ·  5Comments  ·  Source: haizlin/fe-interview

第60天 用css画一个太阳

css
Source
picture haizhilin2013

Most helpful comment

 <section class="c-sun">
      <div class="c-sun__circle"></div>
      <div class="c-sun__arrow" v-for="i in 10" :key="i"></div>
    </section>

    .c-sun {
      display: inline-block;
      position: relative;
      &__circle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: yellow;
      }
      &__arrow {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        @for $i from 1 to 12 {
          &:nth-child(#{$i}) {
            transform: translate(-50%, -50%) rotateZ($i * 36deg);
          }
        }
        &:after {
          position: absolute;
          right: -25px;
          content: "";
          display: block;
          border: 10px solid transparent;
          border-left-color: #ffdc18;
          animation: flashing 1s ease-in-out alternate-reverse infinite;
        }
      }
      @keyframes flashing {
        from {
          opacity: .5;
          transform: translate(10%, 10%);
        }
      }
    }

抖个激灵

picture Vi-jay on 31 Jul 2019
👍6

All 5 comments

:small_red_triangle_down: 是有多无聊
:1234: :abcd: :smiling_imp: 

// 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>
xn213 picture xn213 on 15 Jun 2019
👍1

上面那位老哥的：
https://codepen.io/foreverZ133/pen/wLMpZy

CodePen 上的案例：
https://codepen.io/search/pens?q=css%20sun

forever-z-133 picture forever-z-133 on 15 Jun 2019
👍6 
 <section class="c-sun">
      <div class="c-sun__circle"></div>
      <div class="c-sun__arrow" v-for="i in 10" :key="i"></div>
    </section>

    .c-sun {
      display: inline-block;
      position: relative;
      &__circle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: yellow;
      }
      &__arrow {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        @for $i from 1 to 12 {
          &:nth-child(#{$i}) {
            transform: translate(-50%, -50%) rotateZ($i * 36deg);
          }
        }
        &:after {
          position: absolute;
          right: -25px;
          content: "";
          display: block;
          border: 10px solid transparent;
          border-left-color: #ffdc18;
          animation: flashing 1s ease-in-out alternate-reverse infinite;
        }
      }
      @keyframes flashing {
        from {
          opacity: .5;
          transform: translate(10%, 10%);
        }
      }
    }

抖个激灵

Vi-jay picture Vi-jay on 31 Jul 2019
👍6 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .sun {
      position: absolute;
      right: 200px;
      top: 50px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: #f8e353;
    }

    .sun::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 130px;
      height: 130px;
      border-radius: 50%;
      background: #ffd21f;
      filter: blur(10px);
      z-index: 1;
      animation: inlineSun 5s ease infinite;
    }

    .sun::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: #fcf17c;
      z-index: -1;
      box-shadow: 0 0 40px #ffd21f;
      animation: sun 5s ease-in infinite;
    }

    @keyframes inlineSun {
      0% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
        width: 70px;
        height: 70px;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes sun {
      0% {
        box-shadow: 0 0 90px #ffd21f;
      }

      50% {
        box-shadow: 0 0 30px #ffd21f;
      }

      100% {
        box-shadow: 0 0 90px #ffd21f;
      }
    }
  </style>
</head>

<body>
  <div class="sun"></div>
</body>

</html>

123

ducky-YFH picture ducky-YFH on 25 Oct 2019
👍4 
 <section class="c-sun">
      <div class="c-sun__circle"></div>
      <div class="c-sun__arrow" v-for="i in 10" :key="i"></div>
    </section>

    .c-sun {
      display: inline-block;
      position: relative;
      &__circle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: yellow;
      }
      &__arrow {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        @for $i from 1 to 12 {
          &:nth-child(#{$i}) {
            transform: translate(-50%, -50%) rotateZ($i * 36deg);
          }
        }
        &:after {
          position: absolute;
          right: -25px;
          content: "";
          display: block;
          border: 10px solid transparent;
          border-left-color: #ffdc18;
          animation: flashing 1s ease-in-out alternate-reverse infinite;
        }
      }
      @keyframes flashing {
        from {
          opacity: .5;
          transform: translate(10%, 10%);
        }
      }
    }

抖个激灵

MrZ2019 picture MrZ2019 on 25 Dec 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

haizhilin2013 picture haizhilin2013  ·  3Comments
undefinedYu picture undefinedYu  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments