CSS 实现灯笼动画，祝大家元旦快乐

作者: 苏苏哇哈哈 | 来源:发表于2022-12-30 00:04 被阅读0次

CSS 实现灯笼动画，祝大家元旦快乐
2022-01-01 元旦快乐！
2019.01.01
祝大家元旦快乐
祝大家元旦快乐
祝大家元旦快乐
祝大家元旦快乐
祝大家元旦快乐！
祝大家，元旦快乐!
祝大家元旦快乐

前言

👏CSS 实现大红灯笼动画，祝大家元旦快乐，2023越来越棒！速速来Get吧~

🥇文末分享源代码。记得点赞+关注+收藏！

1.实现效果

在这里插入图片描述

2.实现步骤

定义一个灯笼的背景色bg，线条颜色lineColor

:root {
  --lineColor: #ecaa2f;
  --bg: #f00;
}

父容器container宽高设置为200px/150px

.container {
  width: 200px;
  height: 150px;
  position: relative;
}

在父容器内添加一个圆角矩形，宽高为父容器一致，设置一定的圆角与box-shadow阴影，背景色为 bg

在这里插入图片描述

<div class="container">
 <div class="center"></div>
</div>

.center {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg);
  border-radius: 120px;
  box-shadow: 0 0 80px -10px var(--bg);
}

在center中添加一个标签，宽高与父容器一致，在其前后伪元素上绘制灯笼上的线条

<div class="center">
  <div class="center-line"></div>
 </div>

.center-line {
   width: 100%;
   height: 100%;
 }

在center-line的前伪元素上添加一个圆环，高度与父容器一致，宽度为150px；边框设置为2px，颜色为lineColor，距离顶部为0，水平居中

在这里插入图片描述

.center-line::before {
 content: "";
 position: absolute;
 top: 0;
 left: calc(50% - 75px);
 width: 150px;
 height: 150px;
 border: 2px solid var(--lineColor);
 border-radius: 50%;
}

在center-line的后伪元素上添加一个圆环，高度与父容器一致，宽度为70px；边框设置为2px，颜色为lineColor，距离顶部为0，水平居中

在这里插入图片描述

.center-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 35px);
  width: 70px;
  height: 150px;
  border: 2px solid var(--lineColor);
  border-radius: 50%;
}

在center-line中添加span标签，内容为"元旦快乐"，设置宽度与字体的font-size相同，水平垂直居中，字体颜色为lineColor

在这里插入图片描述

<div class="center">
  <div class="center-line"><span>元旦快乐</span></div>
</div>

.center-line span {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 18px;
 font-size: 18px;
 color: var(--lineColor);
 font-weight: bold;
}

为center容器添加前伪元素，宽高为80px/10px,背景色为lineColor,设置左上右上的一定的圆角弧度，水平居中，top设置为-8px，层级设置为2，居于最顶层

在这里插入图片描述

 .center::before {
  content: "";
  position: absolute;
  top: -8px;
  left: calc(50% - 40px);
  width: 80px;
  height: 10px;
  background: var(--lineColor);
  border-radius: 5px 5px 0 0;
  z-index: 2;
}

为center容器添加后伪元素，宽高为80px/10px,背景色为lineColor,设置左下右下的一定的圆角弧度，水平居中，bottom设置为-8px，层级设置为2，居于最顶层

在这里插入图片描述

.center::after {
 content: "";
 width: 80px;
 height: 10px;
 background: var(--lineColor);
 border-radius: 0 0 5px 5px;
 position: absolute;
 bottom: -8px;
 left: calc(50% - 40px);
 z-index: 2;
}

在最外层的父容器container中添加一个标签，用来绘制灯笼最上面的线条

在这里插入图片描述

<div class="container">
 + <span class="head-line"></span>
</div>

.head-line {
 position: absolute;
 left: calc(50% - 2px);
 top: -60px;
 width: 4px;
 height: 60px;
 background-color: var(--lineColor);
}

在center中添加一个标签，用来绘制灯笼下面的线条

在这里插入图片描述

 <div class="center">
   + <span class="footer-line"></span>
 </div>

.footer-line {
 position: absolute;
 left: calc(50% - 2px);
 bottom: -50px;
 width: 4px;
 height: 50px;
 background-color: var(--lineColor);
 z-index: -1;
}

为footer-line添加一个伪元素，用来绘制灯笼最下面的细须，用linear-gradient设置背景色，这样一个灯笼就绘制完成了，接下来我们给灯笼添加上动画效果

在这里插入图片描述

.footer-line::after {
 content: "";
 position: absolute;
 bottom: -75px;
 left: calc(50% - 8px);
 width: 16px;
 height: 80px;
 background: linear-gradient(
   #f00,
   #e36d00 3px,
   #fbd342 5px,
   #e36d00 8px,
   #e36d00 12px,
   #f00 16px,
   rgba(255, 0, 0, 0.8) 26px,
   rgba(255, 0, 0, 0.6)
 );
 border-radius: 5px 5px 0 0;
}

添加rotate动画，动画的0%和100%旋转-10deg，50%的时候旋转10deg

@keyframes rotate {
  0%,
  100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

为灯笼底部的细须添加旋转动画

在这里插入图片描述

.footer-line {
 + animation: rotate 3s infinite ease-in-out;
}

为灯笼的中间区域center添加旋转动画

在这里插入图片描述

.center {
 + animation: rotate 3s infinite ease-in-out;
}

可以看到，灯笼中间与上方线条之间摆动的幅度太大，为center设置transform-origin

在这里插入图片描述

.center {
 + transform-origin: top center;
}

为最外层父容器添加旋转动画，就实现好了啦~

在这里插入图片描述

.container {
  +  animation: rotate 3s infinite ease-in-out;
}

3.实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS 实现灯笼动画</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    :root {
      --lineColor: #ecaa2f;
      --bg: #f00;
    }
    .container {
      width: 200px;
      height: 150px;
      position: relative;
      animation: rotate 3s infinite ease-in-out;
    }
    .center {
      position: relative;
      width: 100%;
      height: 100%;
      background: var(--bg);
      border-radius: 120px;
      box-shadow: 0 0 80px -10px var(--bg);
      animation: rotate 3s infinite ease-in-out;
      transform-origin: top center;
    }
    .center::before {
      content: "";
      position: absolute;
      top: -8px;
      left: calc(50% - 40px);
      width: 80px;
      height: 10px;
      background: var(--lineColor);
      border-radius: 5px 5px 0 0;
      z-index: 2;
    }
    .center::after {
      content: "";
      width: 80px;
      height: 10px;
      background: var(--lineColor);
      border-radius: 0 0 5px 5px;
      position: absolute;
      bottom: -8px;
      left: calc(50% - 40px);
      z-index: 2;
    }
    .center-line {
      width: 100%;
      height: 100%;
    }
    .center-line span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 18px;
      font-size: 18px;
      color: var(--lineColor);
      font-weight: bold;
    }
    .center-line::before {
      content: "";
      position: absolute;
      top: 0;
      left: calc(50% - 75px);
      width: 150px;
      height: 150px;
      border: 2px solid var(--lineColor);
      border-radius: 50%;
    }
    .center-line::after {
      content: "";
      position: absolute;
      top: 0;
      left: calc(50% - 35px);
      width: 70px;
      height: 150px;
      border: 2px solid var(--lineColor);
      border-radius: 50%;
    }
    .head-line {
      position: absolute;
      left: calc(50% - 2px);
      top: -60px;
      width: 4px;
      height: 60px;
      background-color: var(--lineColor);
    }
    .footer-line {
      position: absolute;
      left: calc(50% - 2px);
      bottom: -50px;
      width: 4px;
      height: 50px;
      background-color: var(--lineColor);
      animation: rotate 3s infinite ease-in-out;
    }
    .footer-line::after {
      content: "";
      position: absolute;
      bottom: -75px;
      left: calc(50% - 8px);
      width: 16px;
      height: 80px;
      background: linear-gradient(
        #f00,
        #e36d00 3px,
        #fbd342 5px,
        #e36d00 8px,
        #e36d00 12px,
        #f00 16px,
        rgba(255, 0, 0, 0.8) 26px,
        rgba(255, 0, 0, 0.6)
      );
      border-radius: 5px 5px 0 0;
    }
    @keyframes rotate {
      0%,
      100% {
        transform: rotate(-10deg);
      }
      50% {
        transform: rotate(10deg);
      }
    }
  </style>
  <body>
    <div class="container">
      <span class="head-line"></span>
      <div class="center">
        <div class="center-line">
          <span>元旦快乐</span>
        </div>
        <span class="footer-line"></span>
      </div>
    </div>
  </body>
</html>