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;
}
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0