gsap实现带音效鼠标跟随悬浮效果代码-html代码-BFW代码库

gsap实现带音效鼠标跟随悬浮效果代码

代码语言：html

所属分类：悬停

代码描述：gsap实现带音效鼠标跟随悬浮效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  font-family: "Helvetica", sans-serif;
  background: black;
}

.cerchio {
  position: relative;
  top: calc(50vh - 30px);
  left: calc(50vw - 330px);
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255, 231, 0, 0.75);
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  outline: 0;
  color: rgba(255, 231, 0, 0.75);
  transition: background 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  margin: 0 150px;
}

.cerchio:hover {
  background: #FFE700;
}

.cerchio.magnet {
  border: 2px solid #FFE700;
}

.cursor-wrap {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
}

.cursor {
  position: fixed;
  top: -30px;
  left: -30px;
}

.circle {
  transform: scale(0.8);
  transition: all 0.2s ease-in-out;
}
</style>



</head>

<body  >
  <button class="cerchio trigger-audio" data-dist="7">Hover</button>
<button class="cerchio trigger-audio" data-dist="4">Hover</button>

<audio id="sound-hover" style="display:none;" controls="controls" preload="auto">
				<source src="//repo.bfw.wiki/bfwrepo/sound/5fdfe5494f63d.mp3"></source>
</audio>

<div class="cursor-wrap js-cursor-wrap">
  <div class="cursor js-cursor">
    <svg height="60" width="60" class="circle">
      <circle cx="30" cy="30" r="26" stroke="#fff" stroke-width=".8" fill="transparent" />
    </svg>
  </div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>   <script >
var cerchio = document.querySelectorAll('.cerchio');

cerchio.forEach(function(elem){
  $(document).on('mousemove touch', function(e){
    magnetize(elem, e);
  });
})

// $(document).on('mousemove touch', function(e){
//   magnetize('.cerchio', e);
// });

function magnetize(el, e){
  var mX = e.pageX,
      mY = e.pageY;
  const item = $(el);
  
  const customDist = item.data('dist') * 20 || 120;
  const centerX = item.offset().left + (.........完整代码请登录后点击上方下载按钮下载查看