如何用JS编写实现网页元素动态跟随鼠标移动的特效代码？

本文共计936个文字，预计阅读时间需要4分钟。

目录演示技术栈源码CSS部分JS部分演示技术栈此次用到了关于CSS的一些功能，以及jQuery。CSS部分CSS3中新增的属性animation是用来为元素实现动画效果的。但animation无法单独用来实现动画。

目录

• 演示
• 技术栈
• 源码
• css部分
• js部分

演示

技术栈

这次用到了关于css的一些功能，和jQuery。

CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

通过 @keyframes 规则，您能够创建动画。

@keyframes定义一个动画，并定义具体的动画效果，比如是放大还是位移等等。

@keyframes 它定义的动画并不直接执行，需要借助animation来运转。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。