给Hexo(next主题)博客加上stackexchange愚人节鼠标跟随特效

今年愚人节的时候stack exchange 换了一套主题如图
愚人节主题

然后就想到可以把这个特效搬到博客上面。

代码

代码来自Github,但是并不能直接用在Next主题的Hexo博客上,修改后的代码如下:
复制下来保存为fairyDustCursor.js(名字可以自己起)文件,然后参见Next主题个性化 中主题美化一节的增加鼠标点击特效的方法添加鼠标跟随特效即可
效果如图:
在这里插入图片描述


/*!
 * Fairy Dust Cursor.js
 * - 90's cursors collection
 * -- https://github.com/tholman/90s-cursor-effects
 * -- http://codepen.io/tholman/full/jWmZxZ/
 */

(function fairyDustCursor() {
   
  
  var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
  var width = window.innerWidth;
  var height = window.innerHeight;
  var cursor = {
   x: width/2, y: width/2};
  var particles = [];
  
  function init() {
   
    bindEvents();
    loop();
  }
  
  // Bind events that are needed
  function bindEvents() {
   
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('touchmove', onTouchMove);
    document.addEventListener('touchstart', onTouchMove);
    
    window.addEventListener('resize', onWindowResize);
  }
  
  function onWindowResize(e)
  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值