.lantern {
  width: 200px;
  height: 300px;
}
/* 灯笼线条颜色 */
$lineColor: #ecaa2f;
/* 灯笼背景颜色 */
$bg: #f00;
/* 定义父容器的宽高 */
.lantern-contaier {
  width: 200px;
  height: 150px;
  position: relative;
  /* 添加旋转动画 */
  animation: rotate 3s infinite ease-in-out;
}
.center {
  width: 100%;
  height: 100%;
  background: $bg;
  /* 设置圆角 */
  border-radius: 120px;
  /* 设置阴影 */
  box-shadow: 0 0 80px -10px $bg;
  position: relative;
  /* 添加旋转动画 */
  animation: rotate 3s infinite ease-in-out;
  /* 旋转浮动太大，设置transform-origin */
  transform-origin: top center;
}
.center-line {
  width: 100%;
  height: 100%;
  position: relative;
}
/* 添加前伪元素，后伪元素 */
.center-line::before,
.center-line::after {
  content: '';
  position: absolute;
  /* 合并相同代码 */
  height: 100%;
  border: 2px solid $lineColor;
  border-radius: 50%;
  /* 距离顶部距离为0 */
  top: 0;
}
.center-line::before {
  width: 150px;
  /* 水平居中 */
  left: calc(50% - 75px);
}
.center-line::after {
  width: 70px;
  /* 水平居中 */
  left: calc(50% - 35px);
}
.center-line span {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 水平垂直居中 */
  transform: translate(-50%, -50%);
  width: 18px;
  font-size: 18px;
  color: $lineColor;
  font-weight: bold;
}

/* 为center添加前后伪元素 */
.center::before {
  border-radius: 5px 5px 0 0;
  /* 距离顶部-8px，稍微小于高度一点 */
  top: -8px;
}
.center::after {
  border-radius: 0 0 5px 5px;
  bottom: -8px;
}
/* 合并代码 */
.center::before,
.center::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 10px;
  background: $lineColor;
  /* 水平居中 */
  left: calc(50% - 40px);
}

.head-line {
  position: absolute;
  width: 4px;
  /* 高度自行调整，合适即可 */
  height: 60px;
  background: $lineColor;
  /* 水平居中 */
  left: calc(50% - 2px);
  top: -60px;
}
.footer-line {
  position: absolute;
  width: 4px;
  height: 50px;
  background: $lineColor;
  /* 水平居中 */
  left: calc(50% - 2px);
  bottom: -50px;
  /* 添加旋转动画 */
  animation: rotate 3s infinite ease-in-out;
}
/* footer-line添加前伪元素 */
.footer-line::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 80px;
  background: linear-gradient(
    $bg,
    #e36d00 3px,
    #fbd342 5px,
    #e36d00 8px,
    #e36d00 12px,
    $bg 16px,
    rgba(255, 0, 0, 0.8) 26px,
    rgba(255, 0, 0, 0.6)
  );
  border-radius: 5px 5px 0 0;
  /* 水平居中 */
  left: calc(50% - 8px);
  bottom: -75px;
}
/* 添加动画 */
@keyframes rotate {
  0%,
  100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
}