gsap实现一个环形跟随首页效果代码-html代码-BFW代码库

gsap实现一个环形跟随首页效果代码

代码语言：html

代码描述：gsap实现一个环形跟随首页效果代码

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


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

<head>

  <meta charset="UTF-8">
  

<style>
html, body {
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;
}
</style>




</head>

<body  >
  <svg class="main1" width="100%" height="100%">
  <defs>
    <linearGradient id="grad1" x1="50%" y1="0%" x2="50%" y2="100%">
      <stop offset="10%" style="stop-color:rgb(255,255,0);stop-opacity:0.9" />
      <stop offset="99%" style="stop-color:rgb(0,255,0);stop-opacity:0.1" />
    </linearGradient>
    <linearGradient id="grad2" x1="50%" y1="0%" x2="50%" y2="100%">
      <stop offset="25%" style="stop-color:rgb(0,255,200);stop-opacity:0.1" />
      <stop offset="99%" style="stop-color:rgb(200,255,0);stop-opacity:0.2" />
    </linearGradient>
  </defs>

  <rect class="m1Bg" fill="url(#grad2)" width="100%" height="100%" />

  <g class="m1_stage">
    <g class="m1_cGroup">
      <circle class="m1OrbBlank" cx="0" cy="50" r="50" fill="#1290ff" />

      <circle class="c1_line c1_line4" cx="0" cy="50" r="550" fill="none" stroke-width="2" stroke="url(#grad1)" opacity="0.4" />
      <g class="m1Orb orb4b">
        <image xlink:href="https://assets.codepen.io/721952/logoVue.png" width="40" height="40" />
      </g>

      <g class="m1Orb orb4">
        <circle cx="15" cy="10.5" r="20" fill="#006bca" />
        <path fill="#fff" opacity="0.75" d="M5.29,14.59l-0.01-0.89v-2.32c0.23-0.05,0.53-0.07,0.9-0.07c0.36,0,0.66,0.02,0.9,0.07v8.17
                                            c-0.24,0.05-0.54,0.07-0.9,0.07s-0.65-0.02-0.9-0.07v-2.57l0.01-0.89l-0.6,0.01H3.25l-0.6-0.01l0.01,0.89v2.57
                                            c-0.23,0.05-0.54,0.07-0.9,0.07c-0.37,0-0.66-0.02-0.89-0.07v-8.17c0.23-0.05,0.52-0.07,0.89-0.07c0.37,0,0.67,0.02,0.9,0.07v2.32
                                            l.........完整代码请登录后点击上方下载按钮下载查看