jquery实现交互式未来主义光标罗盘效果代码-html代码-BFW代码库

jquery实现交互式未来主义光标罗盘效果代码

代码语言：html

所属分类：动画

代码描述：jquery实现交互式未来主义光标罗盘效果代码

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


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

<head>

  <meta charset="UTF-8">

  
<style>
body {
  background: #000;
  cursor: crosshair;
}

#compass-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  -webkit-perspective: 200px;
          perspective: 200px;
}

#compass {
  border: 10px solid;
  color: #23cffc;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  position: relative;
  -webkit-transform: perspective(200px) rotateX(70deg) scale(0.25);
          transform: perspective(200px) rotateX(70deg) scale(0.25);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

#compass:before,
#compass:after {
  width: 100%;
  height: 100%;
  content: '';
  border-width: 20px;
  display: block;
  position: absolute;
  opacity: 0.4;
  border-radius: 50%;
}

#compass:before {
  border-style: dotted;
  -webkit-transform: rotateZ(0) translate3d(-5px, 5px, 25px);
          transform: rotateZ(0) translate3d(-5px, 5px, 25px);
  -webkit-animation: 15s spin infinite linear alternate backwards;
          animation: 15s spin infinite linear alternate backwards;
}

#compass:after {
  border-style: dashed;
  -webkit-transform: rotateZ(360deg) translate3d(5px, -5px, -25px);
          transform: rotateZ(360deg) translate3d(5px, -5px, -25px);
  -webkit-animation: 5s spin infinite linear alternate;
          animation: 5s spin infinite linear alternate;
  z-index: 5;
}

#needle {
  width: 0;
  border-left: 16px solid;
  height: 300px;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  -webkit-transform: rotateZ(0);
          transform: rotateZ(0);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

#needle.in-proximity {
  height: 600px;
  width: 600px;
  margin-left: -300px;
  -webkit-transform: none !important;
          transform: none !important;
  -webkit-transition: border-radius .25s linear,
              width .25s linear,
              height .25s linear,
              border .25s linear,
              margin-left .25s linear;
  transition: border-radius .25s linear,
              width .25s linear,
              height .25s linear,
              border .25s linear,
              margi.........完整代码请登录后点击上方下载按钮下载查看