太阳地球的转圈

最新推荐文章于 2024-10-02 15:35:50 发布
Evalyd
最新推荐文章于 2024-10-02 15:35:50 发布
阅读量97
点赞数
文章标签： css css3 html
本文链接：https://blog.csdn.net/Evalyd/article/details/127711843
版权
<!doctype html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>case01</title>
    <link href="css/reset.css" rel="stylesheet">
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        overflow: hidden;
        height: 100%;
      }

      body {
        background-color: #21223a;
      }

      .container {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      .sun {
        position: relative;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background-color: #fffaa9;
        box-shadow: 0 0 210px #ffcfa9, 0 0 210px #bf90f0;
      }
        /* 眼睛 */
      .sun .eye {
        position: absolute;
        width: 24px;
        height: 12px;
        background-color: #ffcfa9;
        top: 60px;
        left: 30px;
        transform: scale(1.5);
        border-radius: 12px 12px 0 0; 
        animation: eyes-move 3s infinite;
      }

      .sun .eye:before {
        content: "";
        position: absolute;
        width: 24px;
        height: 12px;
        background-color: #ffcfa9;
        transform: scale(1);
        border-radius: 12px 12px 0 0; 
        background-color: #fffaa9;
        top: 4px;
      }
      
      .sun .right-eye {
        left: 90px;
      }
      /* 眼睫毛 */
      .sun .left-eyelash,
      .sun .left-eyelash:before {
        width: 3px;
        height: 9px;
        background-color: #ffcfa9;
        border-radius: 50%;
        position: absolute;
        transform: translate(-3px, 0) rotate(327deg);
      }

      .sun .left-eyelash:before {
        content: "";
      }

      .sun .right-eyelash,
      .sun .right-eyelash:before {
        width: 3px;
        height: 9px;
        background-color: #ffcfa9;
        border-radius: 50%;
        position: absolute;
        transform: translate(25px, 0) rotate(400deg);
      }

      .sun .right-eyelash:before {
        content: "";
        transform: translate(-5px, 0) rotate(356deg);
      }

      .rays {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        animation: self-roate 3s infinite linear alternate;
      }

      .beam {
        width: 40px;
        height: 100px;
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), #ffcfa9 40%, #ffcfa9);
        border-radius: 40% 40% 0 0;
        transform: translate(56px, -100px) rotate(0deg);
        opacity: .03; 
      }

      .beam:nth-of-type(odd) {
        width: 30px; 
      }

      .beam:nth-of-type(2) {
        transform: translate(134px, -169px) rotate(36deg);
      }

      .beam:nth-of-type(3) {
        transform: translate(178px, -190px) rotate(72deg);
      }

      .beam:nth-of-type(4) {
        transform: translate(164px, -210px) rotate(108deg);
      }

      .beam:nth-of-type(5) {
        transform: translate(118px, -264px) rotate(144deg);
      }

      .beam:nth-of-type(6) {
        transform: translate(56px, -350px) rotate(180deg);
      }

      .beam:nth-of-type(7) {
        transform: translate(-26px, -488px) rotate(216deg);
      }

      .beam:nth-of-type(8) {
        transform: translate(-64px, -644px) rotate(252deg);
      }

     .beam:nth-of-type(9) {
      transform: translate(-64px, -820px) rotate(288deg);
     }

     .beam:nth-of-type(10) {
      transform: translate(-15px, -976px) rotate(324deg);
     }
  
     .earth {
      position: absolute;
      left: 200px;
      top: 200px;
      width: 30px;
      height: 30px;
      background-color: #6fd4dd;
      border-radius: 50%;
      box-shadow: 0 0 60px #6fd4dd, 0 0 8px #076344 inset, 0 0 16px 3px rgb(42, 104, 219) inset;
      transform: scale(1) rotate(0deg);
      transform-origin: -150px -100px;
      animation: revolution 10s linear infinite;
    }

    .earth:before,
    .earth:after {
      position: absolute;
      left: 5px;
      top: 8px;
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 3px 4px 8px 2px;
      background-color: rgba(12, 189, 50, 0.3);
    }

    .earth:after {
      left: 19px;
      top: 12px;
      border-radius: 9px 4px 8px 2px;
      background-color: rgba(23, 133, 206, 0.3);
    }

     @keyframes eyes-move {
      0% {
        transform: scale(1.5) translate(0, 0);
      }

      50% {
        transform: scale(1.5) translate(15px, 0);
      }

      100% {
        transform: scale(1.5) translate(0, 0);
      }
     }

     @keyframes self-roate {
      0% {
        transform: rotate(0);
      }

      100% {
        transform: rotate(720deg);
      }
     }

     @keyframes revolution {
      0% {
        transform: scale(1) rotate(0deg);
      }

      50% {
        transform: scale(1) rotate(360deg);
      }

      100% {
        transform: scale(1) rotate(720deg);
      }
    }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="sun">
        <div class="left-eye eye">
          <!-- 左眼的眼睫毛 -->
          <div class="left-eyelash eyelash"></div>
        </div>
        <div class="right-eye eye">
          <!-- 右眼的眼睫毛 -->
          <div class="right-eyelash eyelash"></div>
        </div>
        <div class="rays">
          <div class="beam"></div>
          <div class="beam"></div>
          <div class="beam"></div>
          <div class="beam"></div>
          <div class="beam"></div>
          <div class="beam"></div>
          <div class="beam"></div>
          <div class="beam"></div>
          <div class="beam"></div>
          <div class="beam"></div>
        </div>
      </div>
      <div class="earth"></div>
    </div>
  </body>
</html>