万圣节闪耀夺目的悬挂红灯笼-简单易行的DIY指南

2023-03-11 10:11:25

用CSS3和JavaScript打造晃动的万圣节红灯笼

序幕：点燃节日的激情

万圣节即将到来，在这个神秘的节日里，让我们用一个闪亮的红灯笼来点燃夜晚的热情。本文将手把手教你使用CSS3和JavaScript，制作一个左右摇晃的红灯笼，为你的万圣节增添一丝动感和活力。

第一步：搭建舞台

首先，我们需要创建一个HTML文件，它将充当我们红灯笼的舞台。使用你喜欢的文本编辑器，输入以下代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="lantern"></div>
</body>
</html>

第二步：勾勒红灯笼

接下来，我们需要创建一个CSS文件，为我们的红灯笼赋予形状和色彩。在文件中输入以下代码：

#lantern {
  width: 200px;
  height: 300px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: swing 3s infinite;
}

@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

第三步：赋予生命

最后，我们需要编写JavaScript代码，赋予红灯笼晃动的生命力。在JavaScript文件中输入以下代码：

var lantern = document.getElementById("lantern");

var angle = 0;
var speed = 0.01;

function swing() {
  angle += speed;
  lantern.style.transform = "rotate(" + angle + "rad)";
  requestAnimationFrame(swing);
}

swing();