用CSS和JS点亮万圣节：打造自己的发光小南瓜

前端

2023-09-22 19:17:29

点亮你的南瓜

万圣节即将来到，让我们用CSS和JS点亮我们的南瓜。我们将使用Electron框架，它可以让你轻松地打包你的代码，创建独立的桌面应用程序。

1. 准备工作

首先，确保你已经安装了以下软件：

Node.js
Electron
喜欢的文本编辑器

2. 创建Electron项目

现在，创建一个新的Electron项目：

mkdir halloween-南瓜
cd halloween-南瓜
npm init -y

3. 添加HTML和CSS

接下来，创建index.html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="南瓜"></div>
    <script src="main.js"></script>
  </body>
</html>

然后，创建style.css文件：

#南瓜 {
  width: 200px;
  height: 200px;
  background-color: orange;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: glow 2s infinite alternate;
}

@keyframes glow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 1);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(255, 215, 0, 0);
  }
}

4. 添加JavaScript

现在，创建main.js文件：

const pumpkin = document.getElementById("南瓜");

// 监听南瓜上的单击事件
南瓜.addEventListener("click", () => {
  // 切换动画的播放和暂停
  if (南瓜.style.animationPlayState === "paused") {
    南瓜.style.animationPlayState = "running";
  } else {
    南瓜.style.animationPlayState = "paused";
  }
});