CSS 實(shí)現(xiàn)燈籠動畫，祝大家元旦快樂

前言

??CSS 實(shí)現(xiàn)大紅燈籠動畫，祝大家元旦快樂，2023越來越棒！速速來Get吧~

??文末分享源代碼。記得點(diǎn)贊+關(guān)注+收藏！

1.實(shí)現(xiàn)效果

在這里插入圖片描述

2.實(shí)現(xiàn)步驟

  • 定義一個燈籠的背景色bg，線條顏色lineColor
:root {
  --lineColor: #ecaa2f;
  --bg: #f00;
}
  • 父容器container寬高設(shè)置為200px/150px
.container {
  width: 200px;
  height: 150px;
  position: relative;
}
  • 在父容器內(nèi)添加一個圓角矩形，寬高為父容器一致，設(shè)置一定的圓角與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中添加一個標(biāo)簽，寬高與父容器一致，在其前后偽元素上繪制燈籠上的線條
<div class="center">
  <div class="center-line"></div>
 </div>

.center-line {
   width: 100%;
   height: 100%;
 }
  • 在center-line的前偽元素上添加一個圓環(huán)，高度與父容器一致，寬度為150px；邊框設(shè)置為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的后偽元素上添加一個圓環(huán)，高度與父容器一致，寬度為70px；邊框設(shè)置為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標(biāo)簽，內(nèi)容為"元旦快樂"，設(shè)置寬度與字體的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,設(shè)置左上右上的一定的圓角弧度，水平居中，top設(shè)置為-8px，層級設(shè)置為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,設(shè)置左下右下的一定的圓角弧度，水平居中，bottom設(shè)置為-8px，層級設(shè)置為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中添加一個標(biāo)簽，用來繪制燈籠最上面的線條
在這里插入圖片描述
<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中添加一個標(biāo)簽，用來繪制燈籠下面的線條
在這里插入圖片描述
 <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添加一個偽元素，用來繪制燈籠最下面的細(xì)須，用linear-gradient設(shè)置背景色，這樣一個燈籠就繪制完成了，接下來我們給燈籠添加上動畫效果
在這里插入圖片描述
.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%旋轉(zhuǎn)-10deg，50%的時候旋轉(zhuǎn)10deg
@keyframes rotate {
  0%,
  100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
}
  • 為燈籠底部的細(xì)須添加旋轉(zhuǎn)動畫
在這里插入圖片描述
.footer-line {
 + animation: rotate 3s infinite ease-in-out;
}
  • 為燈籠的中間區(qū)域center添加旋轉(zhuǎn)動畫
在這里插入圖片描述
.center {
 + animation: rotate 3s infinite ease-in-out;
}
  • 可以看到，燈籠中間與上方線條之間擺動的幅度太大，為center設(shè)置transform-origin
在這里插入圖片描述
.center {
 + transform-origin: top center;
}
  • 為最外層父容器添加旋轉(zhuǎn)動畫，就實(shí)現(xiàn)好了啦~
在這里插入圖片描述
.container {
  +  animation: rotate 3s infinite ease-in-out;
}

3.實(shí)現(xiàn)代碼

<!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 實(shí)現(xiàn)燈籠動畫</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>

4.寫在最后??

??提前祝大家元旦快樂，2023越來越棒！??
看完本文如果覺得對你有一丟丟幫助，記得點(diǎn)贊+關(guān)注+收藏鴨 ??
更多相關(guān)內(nèi)容，關(guān)注??蘇蘇的bug，??蘇蘇的github，??蘇蘇的碼云~
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容