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

代码语言：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-0.01,0.89l0.6-0.01h1.44L5.29,14.59z M11.74,12.89l0.01,0.89v5.78c-0.24,0.05-0.54,0.07-0.9,0.07c-0.36,0-0.65-0.02-0.9-0.07
                                            v-5.78l0.01-0.89H9.96L9.23,12.9H7.99c-0.04-0.23-0.06-0.48-0.06-0.76c0-0.28,0.02-0.53,0.06-0.76h5.75
                                            c0.06,0.21,0.09,0.45,0.09,0.73c0,0.28-0.07,0.48-0.22,0.6c-0.15,0.12-0.39,0.19-0.72,0.19h-0.41l-0.73-0.01H11.74z M14.19,19.53
                                            l0.62-8.14c0.3-0.06,0.69-0.08,1.18-0.08c0.49,0,0.88,0.03,1.17,0.08l0.75,3.04c0.21,0.89,0.36,1.6,0.45,2.14h0.07
                                            c0.09-0.54,0.23-1.26,0.45-2.14l0.75-3.04c0.3-0.06,0.69-0.08,1.17-0.08c0.48,0,0.87,0.03,1.16,0.08l0.62,8.14
                                            c-0.22,0.06-0.5,0.1-0.84,0.1s-0.63-0.02-0.84-0.06L20.7,16.1c-0.06-1.1-0.09-2.01-0.09-2.72h-0.08l-1.22,4.97
                                            c-0.21,0.04-0.51,0.06-0.91,0.06c-0.39,0-0.71-0.02-0.93-0.06l-1.21-4.97h-0.08c-0.02,0.97-0.05,1.88-0.09,2.72l-0.19,3.47
                                            c-0.22,0.04-0.5,0.06-0.84,0.06C14.7,19.63,14.42,19.6,14.19,19.53z M26.92,18.01H29c0,0.26-0.02,0.49-0.05,0.68
                                            c-0.09,0.6-0.48,0.9-1.17,0.9h-2.7c-0.32,0-0.57-0.1-0.76-0.29c-0.19-0.19-0.28-0.45-0.28-0.79v-7.13l0.08-0.07h0.66
                                            c0.7,0,1.06,0.38,1.06,1.15v5.59C26.23,18.03,26.59,18.01,26.92,18.01z M5.59,3.67c0-0.04,0-0.08,0-0.13c0-0.53-0.11-0.98-0.32-1.36
                                            C5.05,1.82,4.67,1.63,4.13,1.63S3.19,1.89,2.94,2.39C2.69,2.9,2.56,3.63,2.56,4.59c0,0.96,0.16,1.67,0.47,2.15
                                            c0.31,0.47,0.77,0.71,1.36,0.71c0.6,0,1.3-0.3,2.12-0.9C6.7,6.68,6.89,6.87,7.07,7.11c0.18,0.24,0.29,0.47,0.34,0.68
                                            c-0.38,0.38-0.88,0.7-1.49,0.96C5.3,9,4.7,9.13,4.11,9.13c-0.59,0-1.08-0.09-1.48-0.26C2.23,8.7,1.9,8.47,1.64,8.19
                                            C1.38,7.9,1.17,7.56,1,7.17C0.69,6.44,0.53,5.6,0.53,4.65c0-1.51,0.34-2.65,1.03-3.41C2.25,0.48,3.1,0.1,4.12,0.1
                                            c1.01,0,1.82,0.25,2.41,0.75c0.6,0.5,0.89,1.12,0.89,1.86c0,0.71-0.37,1.06-1.1,1.06C6.08,3.77,5.84,3.74,5.59,3.67z M7.9,8.18
                                            c0.03-0.27,0.11-0.54,0.25-0.8C8.3,7.11,8.47,6.9,8.66,6.74c0.92,0.56,1.77,0.84,2.56,0.84c0.36,0,0.64-0.09,0.83-0.26
                                            c0.19-0.17,0.28-0.38,0.28-0.63c0-0.42-0.28-0.76-0.85-1.01L9.99,5.04c-1.2-0.52-1.8-1.3-1.8-2.32c0-0.77,0.29-1.4,0.87-1.89
                                            c0.58-0.49,1.35-0.73,2.3-0.73c0.95,0,1.89,0.24,2.82,0.72c-0.04,0.58-0.26,1.07-0.66,1.46c-0.86-0.41-1.62-0.62-2.28-0.62
                                            c-0.35,0-0.61,0.08-0.8,0.25c-0.19,0.16-0.28,0.35-0.28,0.56c0,0.34,0.26,0.62,0.78,0.85l1.52,0.63c0.61,0.26,1.08,0.61,1.41,1.03
                                            c0.33,0.43,0.5,0.91,0.5,1.45c0,0.8-0.28,1.45-0.85,1.95c-0.57,0.5-1.39,0.75-2.45,0.75c-0.52,0-1.07-0.08-1.64-0.25
                                            C8.87,8.71,8.36,8.48,7.9,8.18z M14.83,8.18c0.03-0.27,0.11-0.54,0.25-0.8c0.14-0.27,0.31-0.48,0.51-0.64
                                            c0.92,0.56,1.77,0.84,2.56,0.84c0.36,0,0.64-0.09,0.83-0.26c0.19-0.17,0.28-0.38,0.28-0.63c0-0.42-0.28-0.76-0.85-1.01l-1.49-0.63
                                            c-1.2-0.52-1.8-1.3-1.8-2.32c0-0.77,0.29-1.4,0.87-1.89c0.58-0.49,1.35-0.73,2.3-0.73c0.95,0,1.89,0.24,2.82,0.72
                                            c-0.04,0.58-0.26,1.07-0.66,1.46c-0.86-0.41-1.62-0.62-2.28-0.62c-0.35,0-0.61,0.08-0.8,0.25c-0.19,0.16-0.28,0.35-0.28,0.56
                                            c0,0.34,0.26,0.62,0.78,0.85l1.52,0.63c0.61,0.26,1.08,0.61,1.41,1.03c0.33,0.43,0.5,0.91,0.5,1.45c0,0.8-0.28,1.45-0.85,1.95
                                            c-0.57,0.5-1.39,0.75-2.45,0.75c-0.52,0-1.07-0.08-1.64-0.25C15.8,8.71,15.29,8.48,14.83,8.18z M24.1,4.42l-0.01-0.85V2.43
                                            c0.24-0.04,0.51-0.06,0.82-0.06c0.31,0,0.58,0.02,0.8,0.06v1.14L25.7,4.42l0.82-0.01h1.06c0.05,0.27,0.08,0.53,0.08,0.77
                                            c0,0.25-0.03,0.49-0.08,0.75h-1.06L25.7,5.91l0.01,0.81v1.15c-0.23,0.04-0.5,0.06-0.81,0.06s-0.58-0.02-0.81-0.06V6.72l0.01-0.81
                                            l-0.82,0.01h-1.06c-0.05-0.24-0.08-0.49-0.08-0.76s0.03-0.52,0.08-0.76h1.06L24.1,4.42z" />
      </g>
    </g>
    <g class="m1_cGroup">
      <circle class="m1OrbBlank" cx="0" cy="50" r="25" fill="#983334" />

      <circle class="c1_line c1_line3" cx="0" cy="50" r="450" fill="none" stroke-width="2" stroke="url(#grad1)" opacity="0.4" />

      <g class="m1Orb orb3c">
        <image xlink:href="https://assets.codepen.io/721952/logoAngular.png" width="40" height="40" />
      </g>

      <g class="m1Orb orb3b">
        <image xlink:href="https://assets.codepen.io/721952/logoReact.png" width="40" height="40" />
      </g>
      <g class="m1Orb orb3">
        <circle cx="20" cy="8" r="24" stroke="#bc7c00" stroke-width="3" fill="#cc971b" />
        <path fill="#fff" opacity="0.7" d="M5.82,6.1c0-0.05,0-0.09,0-0.14c0-0.57-0.11-1.06-0.34-1.46c-0.23-0.4-0.62-0.6-1.19-0.6S3.32,4.18,3.05,4.73
                                           c-0.27,0.55-0.4,1.34-0.4,2.37c0,1.03,0.16,1.81,0.49,2.31c0.33,0.51,0.8,0.76,1.43,0.76c0.62,0,1.36-0.32,2.22-0.97
                                           C7,9.35,7.19,9.55,7.38,9.81c0.19,0.26,0.31,0.5,0.35,0.73c-0.4,0.41-0.92,0.75-1.57,1.03c-0.65,0.28-1.28,0.42-1.89,0.42
                                           c-0.61,0-1.13-0.09-1.55-0.28c-0.42-0.19-0.77-0.43-1.03-0.74c-0.27-0.3-0.49-0.67-0.67-1.1C0.7,9.09,0.53,8.18,0.53,7.16
                                           c0-1.63,0.36-2.85,1.08-3.67c0.72-0.82,1.61-1.23,2.67-1.23c1.06,0,1.9,0.27,2.53,0.81C7.44,3.6,7.75,4.27,7.75,5.07
                                           c0,0.76-0.38,1.15-1.15,1.15C6.35,6.21,6.09,6.18,5.82,6.1z M14.18,10.84c-0.04,0.18-0.12,0.38-0.25,0.59
                                           c-0.13,0.21-0.25,0.36-0.38,0.46c-0.61-0.03-1.07-0.27-1.38-0.72c-0.57,0.55-1.19,0.82-1.88,0.82c-0.69,0-1.2-0.21-1.55-0.63
                                           c-0.35-0.42-0.52-0.9-0.52-1.43c0-0.77,0.25-1.36,0.75-1.76c0.5-0.4,1.12-0.6,1.86-0.6c0.29,0,0.62,0.01,0.99,0.04v-0.3
                                           c0-0.6-0.3-0.9-0.9-0.9c-0.38,0-1.04,0.15-1.98,0.44C8.69,6.52,8.53,6.05,8.48,5.42c0.42-0.18,0.91-0.33,1.48-0.44
                                           c0.57-0.11,1.08-0.16,1.52-0.16c0.66,0,1.22,0.19,1.66,0.57c0.45,0.38,0.67,0.96,0.67,1.76v2.79
                                           C13.81,10.36,13.93,10.66,14.18,10.84z M10.8,10.47c0.34,0,0.69-0.15,1.03-0.45V8.89c-0.19-0.01-0.46-0.01-0.8-0.01
                                           c-0.59,0-0.89,0.31-0.89,0.92c0,0.19,0.06,0.35,0.18,0.48C10.45,10.41,10.6,10.47,10.8,10.47z M20.52,7.27v2.84
                                           c0,0.58,0.11,1.03,0.32,1.35c-0.34,0.29-0.73,0.44-1.16,0.44c-0.43,0-0.73-0.1-0.89-0.31c-0.16-0.21-0.25-0.53-0.25-0.96V7.65
                                           c0-0.34-0.04-0.58-0.13-0.74c-0.09-0.15-0.24-0.23-0.46-0.23c-0.38,0-0.74,0.18-1.09,0.53v4.58c-0.27,0.05-0.6,0.08-0.98,0.08
                                           c-0.38,0-0.71-0.03-1-0.08v-6.8l0.09-0.1h0.74c0.55,0,0.9,0.27,1.05,0.82c0.65-0.56,1.27-0.85,1.88-0.85c0.61,0,1.07,0.22,1.39,0.66
                                           C20.36,5.95,20.52,6.54,20.52,7.27z M24.2,10.23l1.22-5.24c0.19-0.05,0.46-0.07,0.8-0.07c0.34,0,0.65,0.05,0.94,0.15l0.07,0.1
                                           c-0.87,3.17-1.49,5.38-1.87,6.62c-0.44,0.05-0.9,0.08-1.37,0.08s-0.8-0.07-1.01-0.2c-0.2-0.13-0.36-0.39-0.48-0.78l-1.62-5.75
                                           c0.43-0.18,0.8-0.27,1.11-0.27c0.31,0,0.55,0.07,0.73,0.22c0.18,0.15,0.31,0.39,0.39,0.72l0.64,2.61c0.06,0.23,0.13,0.55,0.2,0.96
                                           c0.07,0.41,0.11,0.66,0.13,0.74C24.09,10.19,24.13,10.23,24.2,10.23z M33.3,10.84c-0.04,0.18-0.12,0.38-0.25,0.59
                                           c-0.13,0.21-0.25,0.36-0.38,0.46c-0.61-0.03-1.07-0.27-1.38-0.72c-0.57,0.55-1.19,0.82-1.88,0.82c-0.69,0-1.2-0.21-1.55-0.63
                                           c-0.35-0.42-0.52-0.9-0.52-1.43c0-0.77,0.25-1.36,0.75-1.76c0.5-0.4,1.12-0.6,1.86-0.6c0.29,0,0.62,0.01,0.99,0.04v-0.3
                                           c0-0.6-0.3-0.9-0.9-0.9c-0.38,0-1.04,0.15-1.98,0.44c-0.27-0.32-0.42-0.79-0.48-1.42c0.42-0.18,0.91-0.33,1.48-0.44
                                           c0.57-0.11,1.08-0.16,1.52-0.16c0.66,0,1.22,0.19,1.66,0.57c0.45,0.38,0.67,0.96,0.67,1.76v2.79C32.92,10.36,33.05,10.66,33.3,10.84
                                           z M29.91,10.47c0.34,0,0.69-0.15,1.03-0.45V8.89c-0.19-0.01-0.46-0.01-0.8-0.01c-0.59,0-0.89,0.31-0.89,0.92
                                           c0,0.19,0.06,0.35,0.18,0.48C29.56,10.41,29.72,10.47,29.91,10.47z M33.72,11.31c0.01-0.22,0.07-0.46,0.18-0.74
                                           c0.11-0.27,0.24-0.48,0.38-0.63c0.69,0.37,1.3,0.56,1.84,0.56c0.27,0,0.47-0.05,0.62-0.14c0.15-0.1,0.22-0.22,0.22-0.38
                                           c0-0.29-0.21-0.51-0.64-0.67l-0.73-0.27c-1.11-0.42-1.67-1.1-1.67-2.03c0-0.68,0.23-1.22,0.69-1.63s1.07-0.6,1.84-0.6
                                           c0.38,0,0.8,0.05,1.26,0.16c0.46,0.11,0.84,0.24,1.15,0.4c0.01,0.25-0.04,0.51-0.15,0.81c-0.11,0.29-0.25,0.5-0.4,0.61
                                           c-0.73-0.34-1.34-0.51-1.83-0.51c-0.19,0-0.35,0.05-0.45,0.14s-0.16,0.21-0.16,0.35c0,0.23,0.19,0.41,0.56,0.56l0.81,0.3
                  .........完整代码请登录后点击上方下载按钮下载查看