css3动画 鼠标跟随

CSS3动画是前端设计中非常重要的一个部分。其中之一就是鼠标跟随。在这里，我们将介绍如何使用CSS3动画实现鼠标跟随效果。

  /**
   * 鼠标跟随
   */
  .follow-mouse {
    position: fixed;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f00;
    transform: translate(-50%,-50%);
    pointer-events: none;
    z-index: 9999;
  }

  /* 根元素 */
  :root {
    --mouse-position-x: 0;
    --mouse-position-y: 0;
  }

  /* 使用JavaScript来获取鼠标位置 */
  document.addEventListener('mousemove',function(event) {
    var x = event.clientX;
    var y = event.clientY;
    
    /* 存储到根元素中的自定义属性 */
    document.documentElement.style.setProperty('--mouse-position-x',x + 'px');
    document.documentElement.style.setProperty('--mouse-position-y',y + 'px');
  });

以上代码是实现鼠标跟随的核心部分。首先，我们定义了一个小球样式，大小、颜色以及显示方式都可以自己调整。需要注意的是，我们使用了position: fixed来设置小球为固定位置，这样才能实现跟随鼠标的效果。

接着，我们使用JavaScript来获取鼠标当前的位置，并将其存储到:root根元素中的自定义属性中，这样CSS样式就可以使用这些值来确定小球的位置。

最后，我们只需要在HTML中加入小球元素，使用position: absolute来确定位置，并将其与自定义属性绑定即可：

  <div class="follow-mouse" style="top: var(--mouse-position-y); left: var(--mouse-position-x);"></div>

这里，我们使用了style属性将top和left属性与自定义属性绑定，这样只要自定义属性发生变化，小球就会跟随鼠标移动。

以上便是如何使用CSS3动画实现鼠标跟随的介绍。在实际的前端开发中，我们可以根据需求对小球样式以及细节进行更进一步的调整。