原生js模仿react采用class类编写一个可爱太阳系行星动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：原生js模仿react采用class类编写一个可爱太阳系行星动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  background: #113;

  background-blend-mode: color;
  background-blend-mode: exclusion;
  margin: 0;
  overflow: hidden;
}

.container {
  display: flex;
  justify-content: center;
  margin-top: 4em;
}

</style>



</head>

<body>
  <div class="container">
  <solar-system></solar-system>
</div>


  
      <script  >
const planetAnimation = /* css */`
:host {
  animation: orbit 5s linear infinite;
  transform-origin: 0% -25%;
  display: inline-block;
}

.container {
  animation: rotate 5s linear infinite;
}

@keyframes orbit {
  to{
    transform: rotate(1turn);
  }
}

@keyframes rotate {
  to{
    transform: rotate(-1turn);
  }
}
`;

const planetTextures = /* css */`
  :host-context(.mars) {
    --texture: radial-gradient(
      40% 22% at 10% 10%,
      #B45006 80%,
      #C96802 92% 100%,
      #0000 110%),
    radial-gradient(
      5% 15% at 24% 75%,
      #B45006 60%,
      #C96802 72% 140%,
      #0000 180%),
    radial-gradient(
      at 20% 0%,
      #0000 50%,
      #C96802 60% 70%,
      #B45006 75%
    ),
    radial-gradient(
      30% 30% at 60% 50%,
      #C96802 60%,
      #D77F09 72%
    );
  }

  :host-context(.saturn) {
    --texture: radial-gradient(
      150% 100% at 50% 105%,
      #9F6F52 10% 11.5%,
      #CCA388 12% 16.5%,
      #E8B878 17% 31.5%,
      #E7AF55 32% 34.5%,
      #F7BE5B 35% 61.5%,
      #E8AC5A 62% 86.5%,
      #E4B788 87% 97.5%,
      #C7A68F 98%
    );
  }

  :host-context(.jupiter) {
    --texture: radial-gradient(
      210% 100% at 50% 95%,
      #A4A091 10%,
      #BBAD96 12% 22%,
      #CEC3B7 27% 30%,
      #DDDAD2 32% 33%,
      #CEC3B7 34% 40%,
      #DDDAD2 42% 50%,
      #CEC3B7 52% 58%,
      #BEB1A1 60% 70%,
      #C1AE97 72% 82%,
      #ABA590 84%
    );
  }

  :host-context(.uranus) {
    --texture: radial-gradient(
      200% 100% at 50% 105%,
      #81ADA8 10%,
      #28B0E2 15% 30%,
      #25BEF5 35% 75%,
      #28B0E2 80% 88%,
      #81ADA8 100%
    );
  }

  :host-context(.earth) {
    --texture: radial-gradient(
      60% 40% at 0% 40%,
      #7C9772 71%,
      #C0BFA6 80%,
      #007DB7 82% 94%,
      #0000 95%),
      radial-gradient(
        at 0% 80%,
        #0000 70%,
        #7C9772 71%,
        #C0BFA6 80%
      ),
      radial-gradient(
        20% 12% at 95% 80%,
        #7C9772 55%,
        #C0BFA6 80% 90%,
        #0000 95%
      ),
      radial-gradient(
        210% 100% at 50% 100%,
      #F2F9FB 10%,
        #007DB7 15% 84%
      );
    }

    :host-context(.neptune) {
      --texture: radial-gradient(
        200% 100% at 50% 105%,
        #226EA0 10%,
        #165E98 15% 30%,
        #2C87BD 35% 75%,
        #165E98 80% 88%,
        #226EA0 100%
      );
    }

    :host-context(.mercury) {
      --texture: radial-gradient(
        #999393,
        #6b6969
      )
    }

    :host-context(.venus) {
      --texture: radial-gradient(
        60% 30% at 50% 100%,
        #ece1d3 30%,
        transparent 80%
      ),
      linear-gradient(
        #d1b99a,
        #dfc5a3
      )
    }

    :host-context(.sun) {
      --texture: #fbbc05;
    }

    :host-context(.sun)::before {
      content: "";
      display: block;
      width: 200%;
      height: 200%;
      position: absolute;
      inset: 0;
      animation: shine 6s ease-in-out infinite alternate;

      background-image: repeating-conic-gradient(gold 0 2%, #0000 2% 5%);
      border-radius: 50%;
      -webkit-mask-image: radial-gradient(#000 25%, #0000 55%, transparent 70%);
    }

    @keyframes shine {
      0% {
        transform: translate(-25%, -25%) rotate(0);
      }

      100% {
        transform: translate(-25%, -25%) rotate(160deg);
      }
    }
  }
`;

class CuteFace extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  static get styles() {
    return (/* css */`
      :host {
        --border-width: calc(var(--size, 150px) * 0.02);
        --width: calc(var(--size, 150px) * 0.35);
        --height: calc(var(--size, 150px) * 0.2);
        --surprise-mouth-shape: 75% / 100%;
        --happy-mouth-shape: 0 0 50% 50% / 0 0 100% 100%;
        --current-shape: var(--happy-mouth-shape);
      }

      .container {
        width: var(--width);
        height: var(--height);
        position: absolute;
        inset: 30% 0 0 30%;
        display: flex;
        flex-direction: column;
        gap: 15%;
      }

      .eyes {
        display: flex;
        justify-content: space-around;
      }

      .eye {
        width: calc(var(--size, 150px) * 0.1);
        height: calc(var(--size, 150px) * 0.1);
        background: #000;
        border-radius: 50%;
        position: relative;
        transition: clip-path 1s ease-in-out;
        box-sizing: border-box;
      }

      .eye.blink {
        background: transparent;
        border: var(--border-width) solid #000;
        clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
      }

      .eye.blink::before { content: none }

      .eye::before {
        content: "";
        background: #fff;
        border-radius: 50%;
        position: absolute;
        inset: 15% 0 0 45%;
        width: calc(var(--size, 150px) * 0.03);
        height: calc(var(--size, 150px) * 0.03);
      }

      .expression {
        display: flex;
        justify-content: space-around;
      }

      .mouth {
        width: calc(var(--size, 150px) * 0.1);
        height: calc(var(--size, 150px) * 0.05);
        background: #000;
        border-radius: var(--current-shape);
        overflow: hidden;
      }

      .tongue {
        content: "";
        background: #d0262e;
        border-radius: 50%;
        transform: translate(50%, 45%);
        width: calc(var(--size, 150px) * 0.05);
        height: calc(var(--size, 150px) * 0.05);
      }

      .blush {
        width: calc(var(--size, 150px) * 0.06);
        height: calc(var(--size, 150px) * 0.04);
        background: #f396a699;
        border-radius: 50%;
      }
    `);
  }

  connectedCallback() {
    this.render();
    const time = 2000 + Math.floor(Math.random() * 5000);
    setInterval(() => this.blink(), time);

    const mood = ~~(Math.random() * 10);
    this.style.setProperty("--current-shape", mood ? "var(--happy-mouth-shape)" : "var(--surprise-mouth-shape)");
  }

  blink() {
    const eyes = this.shadowRoot.querySelectorAll(".eye");
    eyes.forEach(eye => {
      eye.classList.add("blink");
      setTimeout(() => eye.classList.remove("blink"), 1000);
    });
  }

  render() {
    this.shadowRoot.innerHTML = /* html */`
    <style>${CuteFace.styles}</style>
    <div class="container">
      <div class="eyes">
        <div class="left eye"></div>
        <div class="right eye"></div>
      </div>
      <div class="expression">
        <div class="blush"></div>
        <div class="mouth">
          <div class="tongue"></div>
        </div>
    .........完整代码请登录后点击上方下载按钮下载查看