快過年了，css畫一個燈籠
過年了~ 過年了~ 過年了~
辭舊迎新過年啦 張燈結綵春節啦~
金雞起舞送福啦 新的一年福來啦~
文章開頭幾句歌詞，頓時顯得喜慶了不，我們的燈籠是下面這個樣子的。
年味小燈籠
https：//www。zhihu。com/video/1467159630472777728
animation屬性
畫燈籠我們肯定不能畫一個靜態的燈籠，我們先來複習一下CSS中的
animation
屬性，該是是一個簡寫屬性，由
animation-name
，
animation-duration
，
animation-timing-function
，
animation-delay
，
animation-iteration-count
，
animation-direction
，
animation-fill-mode
和
animation-play-state
屬性組成。這裡我們就不展開講解了，具體可以跳轉到菜鳥教程學習。
我們先來看一下下面這個示例：
animation
：
swing
3s
infinite
ease-in-out
；
在上面的例子中使用了一個名為
swing
的動畫序列，動畫序列透過
@keyframes
建立，執行時間
3s
，動畫迴圈執行，最後
ease-in-out
表示動畫執行的節奏。
實現思路
為一個矩形新增
border-radius
使其，形成一個燈籠的外形。
為矩形新增
：：before
和
：：after
來形成燈籠的頂部和頭部
畫一個燈籠線。
在 矩形內部新增兩個比較細的矩形，透過新增 border-radius 來形成燈籠的線條。
設定燈籠的動畫效果
新增燈穗的樣式
接下來我們就分步驟實現。
繪製燈籠外形
首先我們定義HTML結構，程式碼如下：
<！—— 燈籠容器 ——>
<
div
class
=
“lantern-con”
>
<！—— 提著燈籠的線 ——>
<
div
class
=
“lantern-line”
>
div
>
<！—— 燈籠主要區域 ——>
<
div
class
=
“lantern-light”
>
div
>
div
>
然後我們畫一個橢圓，然後透過
：：before
和
：：after
，繪製上下的兩個燈籠蓋，CSS如下：
/* 燈籠容器 */
。
lantern-con
{
position
：
fixed
；
left
：
160
px
；
}
/* 燈籠中間紅色區域 */
。
lantern-light
{
position
：
relative
；
width
：
120
px
；
height
：
90
px
；
background-color
：
red
；
margin
：
30
px
；
border-radius
：
50
%
；
box-shadow
：
-5
px
5
px
50
px
4
px
#fa6c00
；
/* 設定旋轉點 */
transform-origin
：
top
center
；
animation
：
swing
3
s
infinite
ease
-
in-out
；
}
/* 燈籠頂部和底部的樣式 */
。
lantern-light
：：
before
，
。
lantern-light
：：
after
{
content
：
‘’
；
position
：
absolute
；
border
：
1
px
solid
#dc8f03
；
width
：
60
px
；
height
：
12
px
；
/* 背景漸變 */
background
：
linear-gradient
（
to
right
，
#dc8f03
，
#ffa500
，
#dc8f03
，
#ffa500
，
#dc8f03
）；
left
：
30
px
；
}
/* 頂部位置 */
。
lantern-light
：：
before
{
top
：
-7
px
；
border-top-left-radius
：
5
px
；
border-top-right-radius
：
5
px
；
}
/* 底部位置 */
。
lantern-light
：：
after
{
bottom
：
-7
px
；
border-bottom-left-radius
：
5
px
；
border-bottom-right-radius
：
5
px
；
}
/* 提著燈籠的線的樣式 */
。
lantern-line
{
width
：
2
px
；
height
：
50
px
；
background-color
：
#dc8f03
；
position
：
absolute
；
left
：
88
px
；
}
/* 燈籠的動畫效果 */
@
keyframes
swing
{
0
%
{
transform
：
rotate
（
-6
deg
）；
}
50
%
{
transform
：
rotate
（
6
deg
）；
}
100
%
{
transform
：
rotate
（
-6
deg
）；
}
}
燈籠內部線條
燈籠的內部線條是透過兩個矩形實現了，透過
border-radius
屬性將其設定為橢圓，然後繪製邊，呈現燈籠線條。
<
div
class
=
“lantern-light”
>
<！—— 燈籠中間的線條 ——>
<
div
class
=
“lantern-circle”
>
<
div
class
=
“lantern-rect”
>
<！—— 燈籠中間的文字內容 ——>
<
div
class
=
“lantern-text”
>
燈籠
div
>
div
>
div
>
div
>
對應的CSS如下：
/* 燈籠中間的線條 */
。
lantern-circle
，
。
lantern-rect
{
height
：
90
px
；
border-radius
：
50
%
；
border
：
2
px
solid
#dc8f03
；
background-color
：
rgba
（
216
，
0
，
15
，
0。1
）；
}
/* 外層 */
。
lantern-circle
{
width
：
100
px
；
margin
：
12
px
8
px
8
px
10
px
；
}
/* 內層 */
。
lantern-rect
{
margin
：
-2
px
8
px
8
px
26
px
；
width
：
45
px
；
}
/* 文字樣式 */
。
lantern-text
{
font-size
：
28
px
；
font-weight
：
bold
；
text-align
：
center
；
color
：
#dc8f03
；
margin-top
：
4
px
；
}
燈籠穗
現在我們來繪製一下燈籠穗，這個東西比較簡單，最主要的是新增一個動畫效果，其HTML結構如下：
<！—— 燈籠主要區域 ——>
<
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
：
5
px
；
height
：
20
px
；
background-color
：
#ffa500
；
border-radius
：
0
0
5
px
5
px
；
position
：
relative
；
margin
：
-5
px
0
0
59
px
；
/* 讓燈穗也有一個動畫效果 */
animation
：
swing
3
s
infinite
ease
-
in-out
；
}
。
lantern-tassel-middle
，
。
lantern-tassel-bottom
{
position
：
absolute
；
width
：
10
px
；
left
：
-2
px
；
}
。
lantern-tassel-middle
{
border-radius
：
50
%
；
top
：
14
px
；
height
：
10
px
；
background-color
：
#dc8f03
；
z-index
：
2
；
}
。
lantern-tassel-bottom
{
background-color
：
#ffa500
；
border-bottom-left-radius
：
5
px
；
height
：
35
px
；
top
：
18
px
；
z-index
：
1
；
}
到這裡我們就實現了影片中的小燈籠，快執行起來試試效果吧
轉自掘金@一碗周
