灯笼效果（html+css）

<template>
  <div>
    <div class="lantern-box left">
      <div class="lantern-line"></div>
      <div class="lantern-body">
        <!-- 灯笼中间的线条 -->
        <div class="lantern-circle">
          <div class="lantern-rect">
            <!-- 灯笼中间的文字内容 -->
            <div class="lantern-text">福</div>
          </div>
        </div>
        <!-- 灯笼穗 -->
        <div class="lantern-tassel"></div>
      </div>
    </div>
    <div class="lantern-box right">
      <div class="lantern-line"></div>
      <div class="lantern-body">
        <!-- 灯笼中间的线条 -->
        <div class="lantern-circle">
          <div class="lantern-rect">
            <!-- 灯笼中间的文字内容 -->
            <div class="lantern-text">福</div>
          </div>
        </div>
        <!-- 灯笼穗 -->
        <div class="lantern-tassel"></div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.lantern-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 设置旋转点 */
  transform-origin: top center;
  animation: swing 3s infinite ease-in-out;
  position: relative;
  z-index: 999;
}

.left {
  position: fixed;
  left: 20px;
  top: 0;
}

.right {
  position: fixed;
  right: 20px;
  top: 0;
}

.lantern-line {
  width: 5px;
  height: 80px;
  background-color: #dc8f03;
}

.lantern-body {
  position: relative;
  width: 250px;
  height: 170px;
  background-color: #f00;
  border-radius: 120px;
  //   水平,垂直,模糊半径,阴影大小,颜色,内阴影
  // 可用逗号分隔多个阴影,制作复杂重叠阴影效果
  box-shadow: 0 30px 115px -10px #f00 inset, 0 0 10px #f00;
  box-shadow: 0 30px 115px -10px #f00;
  /* 设置旋转点 */
  transform-origin: top center;
  animation: swing 3s infinite ease-in-out;
}

.lantern-body::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100px;
  height: 20px;
  background-color: #dc8f03;
  border-radius: 5px 5px 0 0;
}

.lantern-body::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100px;
  height: 20px;
  background-color: #dc8f03;
  border-radius: 0 0 5px 5px;
}

/* 灯笼的动画效果 */
@keyframes swing {
  0% {
    transform: rotate(-6deg);
  }

  50% {
    transform: rotate(6deg);
  }

  100% {
    transform: rotate(-6deg);
  }
}

.lantern-circle {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 200px;
  height: 190px;
  border: 2px solid #dc8f03;
  border-radius: 50%;
}

.lantern-rect {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 90px;
  height: 240px;
  border: 2px solid #dc8f03;
  border-radius: 50%;
}

.lantern-text {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-family: "楷体";
  /*设置字体*/
  font-size: 64px;
  /*设置字体大小*/
  font-weight: bold;
  /*设置字体粗细*/
  -webkit-text-stroke: 1px rgb(255, 183, 0);
  /*文字描边*/
  -webkit-text-fill-color: transparent;
  /*设置文字的填充颜色*/
  -webkit-animation: shine 3s infinite;
  /*设置动画 字体阴影闪烁*/
}

@-webkit-keyframes shine {
  0% {
    text-shadow: 0 0 5px rgb(255, 183, 0), 0 0 5px rgb(255, 183, 0);
  }

  100% {
    text-shadow: 0 0 50px rgb(255, 183, 0), 0 0 50px rgb(255, 183, 0);
  }
}

.lantern-tassel {
  position: absolute;
  bottom: -45%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 5px;
  height: 75px;
  background-color: #dc8f03;
  /* 设置旋转点 */
  animation: swing 3s infinite ease-in-out;
}

.lantern-tassel::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 30px;
  height: 30px;
  background-color: #dc8f03;
  border-radius: 50%;
}

.lantern-tassel::after {
  content: "";
  position: absolute;
  bottom: -100%;
  left: 50%;
  transform: translate(-50%, 20%);
  width: 20px;
  height: 100px;
  background-color: #ffa500;
  border-radius: 0 0 5px 10px;
}

@media screen and (max-width: 1500px) {
  .lantern-box {
    // display: none;
  }
}
</style>