要過(guò)年了，下面本篇文章帶大家用CSS畫(huà)了個(gè)燈籠，并添加動(dòng)畫(huà)效果，實(shí)現(xiàn)燈籠左右搖擺的效果，希望對(duì)大家有所幫助！

過(guò)年了~ 過(guò)年了~ 過(guò)年了~

辭舊迎新過(guò)年啦 張燈結(jié)彩春節(jié)啦~

金雞起舞送福啦 新的一年福來(lái)啦~

文章開(kāi)頭幾句歌詞，頓時(shí)顯得喜慶了不，我們的燈籠是下面這個(gè)樣子的。

animation屬性

畫(huà)燈籠我們肯定不能畫(huà)一個(gè)靜態(tài)的燈籠，我們先來(lái)復(fù)習(xí)一下CSS中的animation屬性，該是是一個(gè)簡(jiǎn)寫屬性，由animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 屬性組成。這里我們就不展開(kāi)講解了，具體可以到MDN中學(xué)習(xí)。

我們先來(lái)看一下下面這個(gè)示例：

animation: swing 3s infinite ease-in-out;

在上面的例子中使用了一個(gè)名為swing的動(dòng)畫(huà)序列，動(dòng)畫(huà)序列通過(guò)@keyframes創(chuàng)建，執(zhí)行時(shí)間3s，動(dòng)畫(huà)循環(huán)執(zhí)行，最后ease-in-out表示動(dòng)畫(huà)執(zhí)行的節(jié)奏。

實(shí)現(xiàn)思路

• 為一個(gè)矩形添加border-radius使其，形成一個(gè)燈籠的外形。

• 為矩形添加::before和::after來(lái)形成燈籠的頂部和頭部

• 畫(huà)一個(gè)燈籠線。

• 在 矩形內(nèi)部添加兩個(gè)比較細(xì)的矩形，通過(guò)添加 border-radius 來(lái)形成燈籠的線條。

• 設(shè)置燈籠的動(dòng)畫(huà)效果

• 添加燈穗的樣式

接下來(lái)我們就分步驟實(shí)現(xiàn)。

繪制燈籠外形

首先我們定義HTML結(jié)構(gòu)，代碼如下：

<!-- 燈籠容器 --> <div class="lantern-con">   <!-- 提著燈籠的線 -->   <div class="lantern-line"></div>   <!-- 燈籠主要區(qū)域 -->   <div class="lantern-light">   </div> </div>

然后我們畫(huà)一個(gè)橢圓，然后通過(guò)::before和::after，繪制上下的兩個(gè)燈籠蓋，CSS如下：

/* 燈籠容器 */ .lantern-con {   position: fixed;   left: 160px; }  /* 燈籠中間紅色區(qū)域 */ .lantern-light {   position: relative;   width: 120px;   height: 90px;   background-color: red;   margin: 30px;   border-radius: 50%;   box-shadow: -5px 5px 50px 4px #fa6c00;   /* 設(shè)置旋轉(zhuǎn)點(diǎn) */   transform-origin: top center;   animation: swing 3s infinite ease-in-out; }  /* 燈籠頂部和底部的樣式 */ .lantern-light::before, .lantern-light::after {   content: '';   position: absolute;   border: 1px solid #dc8f03;   width: 60px;   height: 12px;   /* 背景漸變 */   background: linear-gradient(     to right,     #dc8f03,     #ffa500,     #dc8f03,     #ffa500,     #dc8f03   );   left: 30px; }  /* 頂部位置 */ .lantern-light::before {   top: -7px;   border-top-left-radius: 5px;   border-top-right-radius: 5px; }  /* 底部位置 */ .lantern-light::after {   bottom: -7px;   border-bottom-left-radius: 5px;   border-bottom-right-radius: 5px; }  /* 提著燈籠的線的樣式 */ .lantern-line {   width: 2px;   height: 50px;   background-color: #dc8f03;   position: absolute;   left: 88px; } /* 燈籠的動(dòng)畫(huà)效果 */ @keyframes swing {   0% {     transform: rotate(-6deg);   }    50% {     transform: rotate(6deg);   }    100% {     transform: rotate(-6deg);   } }

現(xiàn)在就實(shí)現(xiàn)了一個(gè)比較基礎(chǔ)燈籠外形，效果如下：

燈籠內(nèi)部線條

燈籠的內(nèi)部線條是通過(guò)兩個(gè)矩形實(shí)現(xiàn)了，通過(guò)border-radius屬性將其設(shè)置為橢圓，然后繪制邊，呈現(xiàn)燈籠線條。

<div class="lantern-light">   <!-- 燈籠中間的線條 -->   <div class="lantern-circle">     <div class="lantern-rect">       <!-- 燈籠中間的文字內(nèi)容 -->       <div class="lantern-text">燈籠</div>     </div>   </div> </div>

對(duì)應(yīng)的CSS如下：

/* 燈籠中間的線條 */ .lantern-circle, .lantern-rect {   height: 90px;   border-radius: 50%;   border: 2px solid #dc8f03;   background-color: rgba(216, 0, 15, 0.1); }  /* 外層 */ .lantern-circle {   width: 100px;   margin: 12px 8px 8px 10px; }  /* 內(nèi)層 */ .lantern-rect {   margin: -2px 8px 8px 26px;   width: 45px; }  /* 文字樣式 */ .lantern-text {   font-size: 28px;   font-weight: bold;   text-align: center;   color: #dc8f03;   margin-top: 4px; }

效果如下：

燈籠穗

現(xiàn)在我們來(lái)繪制一下燈籠穗，這個(gè)東西比較簡(jiǎn)單，最主要的是添加一個(gè)動(dòng)畫(huà)效果，其HTML結(jié)構(gòu)如下：

<!-- 燈籠主要區(qū)域 --> <div class="lantern-light">   <!-- more code -->   <!-- 燈籠穗 -->   <div class="lantern-tassel-top">     <div class="lantern-tassel-middle"></div>     <div class="lantern-tassel-bottom"></div>   </div> </div>

CSS如下：

/* 燈穗 */ .lantern-tassel-top {   width: 5px;   height: 20px;   background-color: #ffa500;   border-radius: 0 0 5px 5px;   position: relative;   margin: -5px 0 0 59px;   /* 讓燈穗也有一個(gè)動(dòng)畫(huà)效果 */   animation: swing 3s infinite ease-in-out; }  .lantern-tassel-middle, .lantern-tassel-bottom {   position: absolute;   width: 10px;   left: -2px; }  .lantern-tassel-middle {   border-radius: 50%;   top: 14px;   height: 10px;   background-color: #dc8f03;   z-index: 2; }  .lantern-tassel-bottom {   background-color: #ffa500;   border-bottom-left-radius: 5px;   height: 35px;   top: 18px;   z-index: 1; }

到這我們就把這個(gè)燈籠畫(huà)完了。

（學(xué)習(xí)視頻分享：css視頻教程）