教你用JavaScript制作鼠标特效

案例介绍

欢迎来的我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用JavaScript编程实战案例，做一个鼠标爱心特效。鼠标在页面移动时会出现彩色爱心特效。通过实战我们将学会createElement方法、appendChild方法、setTimeout方法。

案例演示

页面出现后，鼠标在页面上移动产生彩色爱心特效。

案例设计

我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。
其中架构设计包含了HTML，CSS，JavaScript 共三部分代码。

源码学习

进入核心代码学习，我们先来看CSS中的核心代码。

@keyframes animate {
   
  0% {
   
    transform: translate(-50%, -50%);
    opacity