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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看