前言
??CSS 實現(xiàn)大紅燈籠動畫章喉，祝大家元旦快樂，2023越來越棒身坐！速速來Get吧~
??文末分享源代碼秸脱。記得點贊+關注+收藏！
1.實現(xiàn)效果
在這里插入圖片描述
2.實現(xiàn)步驟
- 定義一個燈籠的背景色bg部蛇，線條顏色lineColor
:root {
--lineColor: #ecaa2f;
--bg: #f00;
}
- 父容器container寬高設置為200px/150px
.container {
width: 200px;
height: 150px;
position: relative;
}
- 在父容器內(nèi)添加一個圓角矩形摊唇，寬高為父容器一致，設置一定的圓角與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的前偽元素上添加一個圓環(huán)，高度與父容器一致岛请，寬度為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的后偽元素上添加一個圓環(huán)，高度與父容器一致后室，寬度為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標簽挑围，內(nèi)容為"元旦快樂"，設置寬度與字體的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%旋轉(zhuǎn)-10deg贿衍，50%的時候旋轉(zhuǎn)10deg
@keyframes rotate {
0%,
100% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
}
- 為燈籠底部的細須添加旋轉(zhuǎn)動畫
在這里插入圖片描述
.footer-line {
+ animation: rotate 3s infinite ease-in-out;
}
- 為燈籠的中間區(qū)域center添加旋轉(zhuǎn)動畫
在這里插入圖片描述
.center {
+ animation: rotate 3s infinite ease-in-out;
}
- 可以看到，燈籠中間與上方線條之間擺動的幅度太大救恨，為center設置transform-origin
在這里插入圖片描述
.center {
+ transform-origin: top center;
}
- 為最外層父容器添加旋轉(zhuǎn)動畫贸辈，就實現(xiàn)好了啦~
在這里插入圖片描述
.container {
+ animation: rotate 3s infinite ease-in-out;
}
3.實現(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 實現(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>
