返回

玉兔动起来！跟着教程轻松做出专属玉兔

前端

各位读者，大家好！中秋佳节即将来临，作为中华民族的传统节日之一，中秋节自然少不了玉兔的陪伴。上一次使用 CSS 画了一只静态的玉兔，似乎引起了大家的关注，但也有不少人吐槽说没有新意，想要看到更加灵动的玉兔。所以，这次我们就来尝试用一种新的方式去重新“画”玉兔，并让它动起来，让它成为你中秋节装饰中最闪亮的存在！

准备工作：

  • 准备好文本编辑器（如记事本、Notepad++）
  • 准备浏览器（如谷歌浏览器、火狐浏览器、Edge浏览器）

步骤一：创建HTML文件

  1. 打开文本编辑器，新建一个文件，并将其命名为“玉兔.html”。
  2. 在文件中输入以下代码：
<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="玉兔"></div>

  <script src="玉兔.js"></script>
</body>
</html>

步骤二：创建CSS文件

  1. 新建一个文件，并将其命名为“玉兔.css”。
  2. 在文件中输入以下代码：
#玉兔 {
  width: 200px;
  height: 200px;
  background-color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: 跳动 2s infinite alternate;
}

@keyframes 跳动 {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

步骤三：创建JavaScript文件

  1. 新建一个文件，并将其命名为“玉兔.js”。
  2. 在文件中输入以下代码：
var 玉兔 = document.getElementById("玉兔");

玉兔.addEventListener("click", function() {
  玉兔.classList.toggle("跳动");
});

步骤四：运行程序

  1. 将“玉兔.html”、 “玉兔.css” 和“玉兔.js”文件保存到同一目录中。
  2. 在浏览器中打开“玉兔.html”文件。
  3. 点击玉兔，它就会开始动起来！

经过以上步骤，我们就成功地用CSS动画和SVG创建一个可爱的动态玉兔。这个玉兔不仅会动，而且还可以随着你的点击而改变状态。希望这个教程能够帮助大家在中秋佳节期间增添一份乐趣和创意。

最后，祝大家中秋节快乐！