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