MotionPathPlugin实现范艾伦皮带和极光效果代码-html代码-BFW代码库

MotionPathPlugin实现范艾伦皮带和极光效果代码

代码语言：html

所属分类：动画

代码描述：MotionPathPlugin实现范艾伦皮带和极光效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap");

body {
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: #000016;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  font-size: 11px;
}

svg {
  width: 100vw;
  height: 100vh;
}
</style>



</head>

<body>
  <svg id="svg" viewBox="0 0 1280 800">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color: #ec4646; stop-opacity: 1"></stop>
      <stop offset="100%" style="stop-color: #ffe227; stop-opacity: 0"></stop>
    </radialGradient>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color: #ffe227; stop-opacity: 1"></stop>
      <stop offset="100%" style="stop-color: #f88f01; stop-opacity: 0"></stop>
    </radialGradient>
    <radialGradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color: #f88f01; stop-opacity: 1"></stop>
      <stop offset="100%" style="stop-color: #e27802; stop-opacity: 0"></stop>
    </radialGradient>

    <radialGradient id="grad4" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color: #111f46; stop-opacity: 1" id="aurora-stop-1"></stop>
      <stop offset="100%" style="stop-color: #111f46; stop-opacity: 0.2" id="aurora-stop-2"></stop>
    </radialGradient>

    <radialGradient id="grad5" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color: #d3e0ea; stop-opacity: 1" id="cxx"></stop>
      <stop offset="100%" style="stop-color: #d3e0ea; stop-opacity: 0" id="cxx2"></stop>
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="1280" height="800" fill="#111f46"></rect>
  <g>
    <rect width="1280" height="300" fill="#05102c" stroke="none" id="sky"></rect>
    <circle cx="133.98568875202156" cy="198.75639805406715" fill="url(#grad5)" stroke="none" r="1.5284343532879316"></circle>
    <circle cx="282.167361210396" cy="45.49542600062168" fill="url(#grad5)" stroke="none" r="0.6199522682163205"></circle>
    <circle cx="851.4766015763282" cy="197.81048627657188" fill="url(#grad5)" stroke="none" r="0.057492235454552176"></circle>
    <circle cx="793.1550711306073" cy="189.404140212519" fill="url(#grad5)" stroke="none" r="0.3988069039353612"></circle>
    <circle cx="184.5274824812645" cy="233.23377934807155" fill="url(#grad5)" strok.........完整代码请登录后点击上方下载按钮下载查看