[css] 第60天用css画一个太阳 #251

haizhilin2013 · 2019-06-14T20:39:41Z

第60天用css画一个太阳

xn213 · 2019-06-15T04:29:39Z

🔻 是有多无聊
🔢 🔡 😈

// 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>

forever-z-133 · 2019-06-15T08:38:11Z

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

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

Vi-jay · 2019-07-31T04:18:12Z

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

ducky-YFH · 2019-10-25T08:39:32Z

<!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>

MrZ2019 · 2020-12-25T09:04:02Z

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

haizhilin2013 added the css css label Jun 14, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css] 第60天用css画一个太阳 #251

[css] 第60天用css画一个太阳 #251

haizhilin2013 commented Jun 14, 2019

xn213 commented Jun 15, 2019 •

edited

forever-z-133 commented Jun 15, 2019

Vi-jay commented Jul 31, 2019

ducky-YFH commented Oct 25, 2019

MrZ2019 commented Dec 25, 2020

[css] 第60天 用css画一个太阳 #251

[css] 第60天 用css画一个太阳 #251

Comments

haizhilin2013 commented Jun 14, 2019

xn213 commented Jun 15, 2019 • edited

forever-z-133 commented Jun 15, 2019

Vi-jay commented Jul 31, 2019

ducky-YFH commented Oct 25, 2019

MrZ2019 commented Dec 25, 2020

[css] 第60天用css画一个太阳 #251

[css] 第60天用css画一个太阳 #251

xn213 commented Jun 15, 2019 •

edited