html+css设计两个摆动的大灯笼

以下是关于“HTML+CSS设计两个摆动的大灯笼”的完整攻略：

1.理解需求

首先，我们要理解需求意味着我们知道如何开始设计我们的大灯笼。根据所给出的需求，我们需要设计两个大灯笼，使它们可以摆动。因此，设计的页面应该包括两个大灯笼的模型，以及它们摆动的动作。在完成这个任务之后，这个网站应该呈现一个稳定的页面，并且大灯笼应该能够正确地摆动。

2.HTML布局

接下来，我们需要完成HTML布局。我们可以这样做：

<!-- index.html 文件 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML+CSS设计两个摆动的大灯笼</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- 设计两个大灯笼 -->
  <div class="lantern left">
    <!-- 灯笼的顶部 -->
    <div class="top"></div>

    <!-- 灯笼的身体 -->
    <div class="body"></div>

    <!-- 灯笼的底部 -->
    <div class="bottom"></div>

    <!-- 灯笼下面的绳子 -->
    <div class="rope"></div>
  </div>

  <div class="lantern right">
    <!-- 灯笼的顶部 -->
    <div class="top"></div>

    <!-- 灯笼的身体 -->
    <div class="body"></div>

    <!-- 灯笼的底部 -->
    <div class="bottom"></div>

    <!-- 灯笼下面的绳子 -->
    <div class="rope"></div>
  </div>

  <script src="move.js"></script>
</body>
</html>

在上面代码中，我们创建了一个具有两个灯笼的div容器。具体来说，我们为左侧灯笼设立一个lantern left类，为右侧灯笼设置一个lantern right类。在设计灯笼时，我们需要为顶部、身体和底部，以及绳子，分别创建新的div元素。

3.CSS样式

CSS样式设计可以这样做：

/* style.css 文件 */
.lantern{
  float:left;
  width:50%;
  height:600px;
  position:relative;
}

.lantern .top {
  background:#0a0a0a;
  border-radius:50% 50% 0 0;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -100px;
}

.lantern .body {
  background: #cc3a3a;
  width: 203px;
  height: 300px;
  position: absolute;
  top: 200px;
  left: 50%;
  margin-left: -101.5px;
}

.lantern .bottom {
  background: #0a0a0a;
  border-radius: 0 0 50% 50%;
  width: 200px;
  height:200px;
  position: absolute;
  top: 500px;
  left: 50%;
  margin-left: -100px;
}

.lantern .rope {
  background: #a8a8a8;
  width: 5px;
  height: 150px;
  position: absolute;
  top: 650px;
  left: 50%;
  margin-left: -2.5px;
}

.left .rope{
  transform: rotate(-20deg);
  transform-origin: center bottom;
}

.right .rope{
  transform: rotate(20deg);
  transform-origin: center bottom;
}

上述样式代码中，我们使用了常规样式和过渡动画的方法让大灯笼摆动。具体来说，我们设置了灯笼、灯笼顶部、灯笼身体、灯笼底部、以及灯笼下的绳子的CSS样式值。我们通过浮动（float），宽度（width）和高度（height）属性设置容器的定位。我们同时赋予每个项在相对位置上足够的空间。在左右两侧的大灯笼中，我们将灯笼底部与顶部分别定义为凸形与凹形。我们还对绳子运用CSS的新特性“transform”来让它们摆动。

4. JavaScript动态效果

接着，我们定义JavaScript文件，以使大灯笼可以摆动。我们可以这样做：

// move.js 文件
(function move(){
  const lanterns = document.querySelectorAll('.lantern')
  let offset = 0;

  setInterval(() => {
    offset+=0.1;
    lanterns[0].style.transform = `rotate(${Math.sin(offset)* 20}deg)`;
    lanterns[1].style.transform = `rotate(${-Math.sin(offset)* 20}deg)`;
  }, 1000/60);
})();

在上述代码中，我们使用了JavaScript闭包（IIFE函数），来使每个灯笼独立地摆动。我们首先使用querySelectorAll方法获取所有的灯笼元素。然后，我们使用setInterval()定时器函数每秒执行60次来改变偏移量的值，从而实现动画。我们将左灯笼旋转20度，右灯笼旋转-20度，这就可以构成两个灯笼相互摆动的效果。