光标画布

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;

var mouseX = width / 2;
var mouseY = height / 2;

var circle = {
  radius: 10,
  lastX: mouseX,
  lastY: mouseY };

var elems = [].concat(_toConsumableArray(document.querySelectorAll('[data-hover]')));

function onResize() {
  width = canvas.width = window.innerWidth;
  height = canvas.height = window.innerHeight;
}

function render() {
  circle.lastX = lerp(circle.lastX, mouseX, 0.25);
  circle.lastY = lerp(circle.lastY, mouseY, 0.25);

ctx.clearRect(0, 0, width, height);
  ctx.beginPath();
  ctx.arc(circle.lastX, circle.lastY, circle.radius, 0, Math.PI * 2, false);
  ctx.fillStyle = "#ffffff";
  ctx.fill();
  ctx.closePath();

requestAnimationFrame(render);
}

function init() {
  requestAnimationFrame(render);

window.addEventListener('mousemove', function (e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
  });

window.addEventListener('resize', onResize, false);

var tween = TweenMax.to(circle, 0.25, {
    radius: circle.radius * 3,
    ease: Power1.easeInOut,
    paused: true });

elems.forEach(function (el) {
    el.addEventListener('mouseenter', function () {
      tween.play();
    }, false);
    el.addEventListener('mouseleave', function () {
      tween.reverse();
    }, false);
  });
}

function lerp(a, b, n) {
  return (1 - n) * a + n * b;
}

init();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg