serialCursor是一个jQuery插件，用于创建具有永久动画的鼠标指针效果。

光标的整个设计是基于一个永不停止的旋转圆。移动将通过移动鼠标来执行。

参见：

• jQuery和GSAP中的交互式光标效果
• jQuery和GSAP中的花式光标动画-光标和磁性

如何使用它:

1.在文档中加载必要的JavaScript库。

• jQuery
• 通用安全协议
• 纸张.js
• 简单噪音.js

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/gsap.min.js"></script>
<script src="/path/to/cdn/paper-core.min.js"></script>
<script src="/path/to/cdn/simplex-noise.min.js"></script>

2.加载jQuery serialCursor插件的文件。

<link href="dist/jquery.serialcursor.css" rel="stylesheet" />
<script src="dist/jquery.serialcursor.js"></script>

3.使用默认选项初始化插件。这将对鼠标指针应用默认的光标效果。

$(document).ready(function(){
  $('#serialcursor').serialcursor();
});

4.使用以下参数配置光标效果。

$('#serialcursor').serialcursor({
  stateDataAttr: 'data-serialcursor-state',
  strokeColor: 'rgba(255, 255, 255, .4)',
  strokeWidth: 1,
  noiseScale: 150,
  noiseRange: 4,
  htmlCursor: '<div id="serialcursor"></div>',
  htmlInner: '<canvas id="serialcursor-inner"></canvas>',
  htmlPointer: '<div id="serialcursor-pointer"></div>',
  htmlGrab:
    '<div id="serialcursor-pointer-grab">'+
      '<svg class="sub-icon is-left" xmlns="http://www.w3.org/2000/svg" width="8" height="15" viewBox="0 0 8 15">'+
        '<path d="M6.42,14.68A1,1,0,1,0,7.9,13.27L2.43,7.5,7.9,1.73a1,1,0,0,0,0-1.45,1,1,0,0,0-1.44,0L.28,6.8a1,1,0,0,0,0,1.4Z"/>'+
      '</svg>'+
      '<svg class="sub-icon is-right" xmlns="http://www.w3.org/2000/svg" width="8" height="15" viewBox="0 0 8 15">'+
        '<path d="M1.77.32A1,1,0,0,0,.28,1.73L5.75,7.5.28,13.27a1,1,0,1,0,1.49,1.41L7.9,8.2a1,1,0,0,0,0-1.4Z"/>'+
      '</svg>'+
    '</div>'
});

5.覆盖光标效果的默认样式。

#serialcursor {
  pointer-events: none;
}
 
#serialcursor-inner {
  position: fixed;
  z-index: 13;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  opacity: 0.2;
  transition: opacity 900ms;
}
 
#serialcursor-pointer {
  position: fixed;
  z-index: 13;
  height: 8px;
  width: 8px;
  transform: translate(-50%, -50%);
  background-color: #bc2d39;
  border-radius: 100%;
  transition: 200ms;
}
 
#serialcursor.on-mousemove #serialcursor-inner {
  opacity: .6;
}
 
#serialcursor.is-click #serialcursor-inner {
  opacity: 1;
}
 
#serialcursor.is-click #serialcursor-pointer {
  transform: translate(-50%, -50%) scale(0.75);
}
 
#serialcursor-pointer-grab {
  opacity: 0;
  transition: opacity 400ms;
}
 
#serialcursor-pointer-grab .sub-icon {
  position: absolute;
  top: -2px;
  width: 6px;
  height: 14px;
  fill: #bc2d39;
  transition: 400ms;
}
 
#serialcursor-pointer-grab .sub-icon.is-left {
  left: -5px;
}
 
#serialcursor-pointer-grab .sub-icon.is-right {
  right: -5px;
}
 
#serialcursor.is-grab #serialcursor-pointer-grab {
  opacity: 1;
}
 
#serialcursor.is-grab #serialcursor-pointer-grab .sub-icon {
  fill: #fff;
}
 
#serialcursor.is-grab #serialcursor-pointer-grab .sub-icon.is-left {
  left: -16px;
}
 
#serialcursor.is-grab #serialcursor-pointer-grab .sub-icon.is-right {
  right: -16px;
}
 
[data-serialcursor-state='grab'] {
  cursor: grab;
}

预览截图

非常酷 动画光标 jQuery serialCursor