Skip to content

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

New issue
New issue
Open
Open
[css] 第60天 用css画一个太阳#251
Labels
csscss
@haizhilin2013

Description

@haizhilin2013
haizhilin2013
opened on Jun 14, 2019
Collaborator

第60天 用css画一个太阳

Activity

haizhilin2013
added
csscss
on Jun 14, 2019
xn213

xn213 commented on Jun 15, 2019

@xn213
xn213
on Jun 15, 2019 · edited by xn213

🔻 是有多无聊
🔢 🔡 😈

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

forever-z-133 commented on Jun 15, 2019

@forever-z-133
forever-z-133
on Jun 15, 2019

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

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

Vi-jay

Vi-jay commented on Jul 31, 2019

@Vi-jay
Vi-jay
on Jul 31, 2019
 <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

ducky-YFH commented on Oct 25, 2019

@ducky-YFH
ducky-YFH
on Oct 25, 2019
<!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

smile-2008

smile-2008 commented on Dec 25, 2020

@smile-2008
smile-2008
on Dec 25, 2020
 <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%);
        }
      }
    }

抖个激灵

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    csscss

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@forever-z-133@Vi-jay@ducky-YFH

        Issue actions
          [css] 第60天 用css画一个太阳 · Issue #251 · haizlin/fe-interview