javascript - 鼠标移动时模糊透明的圆形背景效果

Question

我正在尝试复制这种效果:http://atopos.gr/not-a-toy/ (尝试移动鼠标)，但我不知道他们是如何做到的？

我在这里尝试使用 JSfiddle:http://jsfiddle.net/1tz5b6r0/ , 但它不起作用。

函数:

 function animate() {
   requestAnimationFrame(animate);

   update();
 }

运行requestAnimationFrame，但这似乎并没有出现在他们的代码中的任何地方。

我不知道他们做了什么来创造这种效果

我错过了什么？

Answer 1

不错的效果，试了一下: http://jsfiddle.net/wLa4cLay/

• 鼠标每次移动都会在鼠标位置创建一个模糊的圆圈
• 颜色随机，尺寸随机
• 圆圈立即缩小并淡出

• 虚化效果为方框阴影

  /* 每次鼠标移动都创建一个动画圆圈 */$('body').on('mousemove', 函数(ev) { createRandomCircle(ev.pageX, ev.pageY);});

  函数 createRandomCircle(x, y) {

  /* shadow has 100px top offset, so compensate with -100px top */
  y = y -100;
  
  /* random color */
  var colorR = Math.ceil(Math.random() * 255);
  var colorG = Math.ceil(Math.random() * 255);
  var colorB = Math.ceil(Math.random() * 255);
  var color = 'rgb('+colorR+','+colorG+','+colorB+')';
  
  /* random size */
  var size = Math.ceil(Math.random() * 80);
  
  /* create the circle */
  var circle = $('<span />')
      .addClass('circle')
      .css('left', x+"px")
      .css('top', y+"px")
      .css('width', size+"px")
      .css('height', size+"px")    
      .css('color', color)
      .css('box-shadow', '0px 100px 40px')
      .css('border-radius', '80px');
  
  circle.appendTo('body');
  
  /* animate the circle (shrink and fade out)  */  
  circle.animate({opacity: 0, width: '10px', height: '10px'}, 500, function() {
      /* remove it when animation is finished */
      $(this).remove();
  });
  

样式:

html, body {
    height: 100%;
}

.circle {
  display: block;
  position:absolute;
  background-color: transparent;
}