gsap+svg实现页面加载旋转器代码-html代码-BFW代码库

gsap+svg实现页面加载旋转器代码

代码语言：html

代码描述：gsap+svg实现页面加载旋转器代码，点击不同的点可实现位置互换。

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
 background-color: #FFFCF9;
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width: 100%;
 height: 100%;
 visibility: hidden;
}
.dot {
	cursor: pointer;
}
</style>


  
</head>

<body >
  <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" fill="#4983DC" stroke="#4983DC" stroke-miterlimit="10" stroke-width="4">  
	<circle class="dot" cx="0" cy="0" r="12"/>
	<circle class="dot" cx="0" cy="0" r="12"/>
	<circle class="dot" cx="0" cy="0" r="12"/>
	<circle class="dot" cx="0" cy="0" r="12"/>
	<circle class="dot" cx="0" cy="0" r="12"/>
	<circle class="dot" cx="0" cy="0" r="12"/>
	<circle class="dot" cx="0" cy="0" r="12"/>
</svg>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EasePack.3.51.js"></script>
      <script >
gsap.config({ trialWarn: false });
console.clear();

let select = s => document.querySelector(s),
toArray = s => gsap.utils.toArray(s),
mainSVG = select('#mainSVG'),
allDots = toArray('.dot'),
spacerX = allDots.length * allDots[0].getAttribute('r') / 1.35,
currentDotId = 0,
oldDotId = 0,
currentDotArray = [],
mainTl = gsap.timeline({ onComplete: reset }),
viewbox = mainSVG.getAttribute('viewBox').split(' ').map(x => parseInt(x)),
sizeObj = {
  width: viewbox[2],
  height.........完整代码请登录后点击上方下载按钮下载查看