CSS + JS 三维灯笼：欢欢喜喜过大年

前端

2023-12-31 15:51:20

朋友们大家好！我是 [你的名字]，一位热爱春节传统的技术博主。春节临近，家家户户张灯结彩，喜气洋洋，我也迫不及待地向大家介绍一个用 CSS 和 JS 打造的趣味灯笼，让我们一起欢欢喜喜过大年吧！

在开始之前，先让我们来猜一个灯笼谜：

头戴红缨身穿袄，圆圆肚肚像个宝。
什么东西？

没错，答案就是灯笼啦！

CSS+JS合成三维灯笼

现在，让我们用神奇的 CSS 和 JS 来合成一个三维灯笼吧！

首先，使用 HTML 创建一个简单的灯笼框架：

<div id="lantern">
  <div id="top"></div>
  <div id="body"></div>
  <div id="bottom"></div>
</div>

接下来，用 CSS 来设置灯笼的基本样式：

#lantern {
  width: 200px;
  height: 300px;
  background-color: red;
  border-radius: 100px 100px 0 0;
  position: relative;
}

#top {
  width: 100px;
  height: 50px;
  background-color: yellow;
  border-radius: 50px 50px 0 0;
  position: absolute;
  top: -25px;
  left: 50px;
}

#body {
  width: 150px;
  height: 200px;
  background-color: white;
  border-radius: 0 0 100px 100px;
  position: absolute;
  top: 25px;
  left: 25px;
}

#bottom {
  width: 50px;
  height: 50px;
  background-color: yellow;
  border-radius: 0 0 50px 50px;
  position: absolute;
  bottom: -25px;
  left: 75px;
}

最后，使用 JS 来添加交互效果，让灯笼可以旋转：

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

lantern.addEventListener("mousemove", (e) => {
  const x = e.clientX;
  const y = e.clientY;

  lantern.style.transform = `rotateX(${y / 10}deg) rotateY(${x / 10}deg)`;
});