今天才想起來這回事，沒辦法就急急忙忙的趕工一下，接下來我就畫一下這個海報試試手了：

請添加圖片描述

一、背景制作

1.1 準備工作

先給整個網頁制作一個布局吧，直接 flex 搞定，并且使其居中 justify-content、align-items 都要賦值為 center：

body {display: flex;justify-content: center;align-items: center;height: 100vh;width: 100vw;
}

接下來直接創建一個 div ，給予一個 demo 樣式：

<body><div 那么這個demo 樣式如下：```css
.demo {height: 400px;width: 1200px;position: relative;background-color: #8bb72b;overflow: hidden;
}

那么此刻咱們需要做的準備工作就搞定了，那么接下來咱們就在這個框內畫東西：

在這里插入圖片描述

1.2 背景云朵

首先咱們就先畫一個云朵吧，云朵就在粽子的腳底下，制作起來很簡單；哦，提一下，為了簡單（主要是懶），就直接在 style 標簽中添加樣式吧。

我們先看一下一個云朵的樣子：

在這里插入圖片描述

這個云呢一看就知道就是一個 div 給予一個圓角，隨后再來一個 before 和 after 不就搞定了？

所以現在咱們創建一個 cloud 樣式，并且設置 before 和 after 的樣式：

.cloud:after,
.cloud:before {content: "";position: absolute;background-color: white;border-radius: 50%;
}.cloud:after {width: 50px;height: 50px;top: -54%;left: 14%;
}.cloud:before {width: 100px;height: 100px;top: -90%;right: 10%;
}

after 和 before 大小不一樣，所以我設置的寬高也是不一的，但總有一個大或者一個小；不過一定要記住設置圓角否則你的云就是這樣：

在這里插入圖片描述

突然感覺這個云很像一個坦克，看來坦克我也會畫了。

繪制好云后你可以再設置兩個樣式，當然你也可以用子元素選擇器為多個云設置不一樣的大小、位置信息，在這里圖方便，我就直接給予了兩個樣式：

.cloud1 {transform: scale(1);opacity: 0.8;left: 100px;top: 410px;z-index: 1;
}.cloud2 {left: 260px;top: 360px;transform: scale(1.1);opacity: 0.9;z-index: 1;
}

這兩個樣式給予的透明度 opacity 是為了使云彩更加的“縹緲”，當然你也可以再加一些陰影，這樣看起來更加真實，并且其中的 scale 可以幫助你調整云朵大小，再或者你可以使用 rotate 等其他方法轉動一下角度都行。

最后我添加兩個 div，包裹在一個 div 中方便分類（可能我的風格不是前端風格，不要在意）：

<div class="demo"><div class="cloud-main"><div class="cloud cloud1"></div><div class="cloud cloud2"></div></div>
</div>

1.3 背景圈圈圈

云朵增加完了咱們就開水增加這些背景上的“圈圈圈”吧：

在這里插入圖片描述

這些圈圈圈你可以用背景漸變來做，在這里我就直接畫了，也就是一個 div 設置好圓角然后 left、top、bottom 調一下位置，說起來是真的簡單，就不再贅述這里了，直接寫上樣式：

.circle {position: absolute;height: 400px;width: 1200px;
}.circle1,
.circle2,
.circle3,
.circle4,
.circle5,
.circle6,
.circle7,
.circle8 {position: absolute;border-radius: 100%;background-color: #0f893c;
}.circle1 {height: 300px;width: 300px;bottom: -130px;
}.circle2 {height: 150px;width: 150px;bottom: -30px;left: 270px
}.circle3 {height: 30px;width: 30px;bottom: 10px;left: 430px
}.circle4 {height: 60px;width: 60px;bottom: 10px;left: 530px
}.circle5 {height: 160px;width: 260px;bottom: -130px;left: 530px
}.circle6 {height: 60px;width: 160px;bottom: -30px;left: 730px
}.circle7 {height: 60px;width: 160px;bottom: -30px;left: 780px
}.circle8 {height: 160px;width: 160px;bottom: -80px;left: 880px
}
/*黃色圈*/.y-circle1,
.y-circle2,
.y-circle3,
.y-circle4 {position: absolute;border-radius: 100%;background-color: #cdd622;
}.y-circle1 {height: 60px;width: 60px;bottom: 180px;left: 880px
}.y-circle2 {height: 30px;width: 30px;bottom: 280px;left: 780px
}.y-circle3 {height: 10px;width: 10px;bottom: 380px;left: 720px
}.y-circle4 {height: 20px;width: 20px;bottom: 290px;left: 680px
}

因為每一個圓圈圈都有不同的大小，所以就寫了多個樣式用于調整他們的大小、位置等，突然發現還不如用漸變方便，但是寫都寫了，那就貼上吧；接著咱們在 html 中添加元素：

<div class="circle"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div><div class="circle5"></div><div class="circle6"></div><div class="circle7"></div><div class="circle8"></div><div class="y-circle1"></div><div class="y-circle2"></div><div class="y-circle3"></div><div class="y-circle4"></div>
</div>

此時整個背景效果如下：

在這里插入圖片描述

是不是感覺好像有點意思了？那我們接著往下。

二、添加角色元素

2.1 添加小太陽

首先咱們可以分析一下這個小太陽：

在這里插入圖片描述

我們可以明顯的知道小太陽這個角色和本身太陽的區別，那就是有了表情；沒有表情的太陽和有表情的太陽完全不是同一個“東西”，這差距就像 “喜歡吃辣的人看到了豆腐無感，看到了麻婆豆腐就控制不了自己” ，所以關鍵點就是表情的制作。

雖然有表情和沒表情的觀感不一樣，但是本質一個圓還是要畫的，那么這個太陽還有周圍的紅色小點陽光，肯定是在一個父容器之下，那么此時咱們先給他們的父容器設置一個樣式吧：

/*太陽*/  
.sun {position: absolute;height: 150px;width: 150px;
}

在這里我定義了這個父容器的布局以及寬高，那么接下來咱們就開始定義這個太陽的主體，直接設置一個元素圓角值給滿隨后稍微定一下位置即可：

.sun-body {position: absolute;height: 95px;width: 95px;background-color: #ff5f47;border-radius: 100%;border: 4px black solid;left: 30px;top: 30px;
}

那么主體有了，就到眼睛了，很明顯眼睛就是豆豆眼，直接一個元素圓角，設置背景色為黑解決：

.sun-eye {position: absolute;height: 10px;width: 10px;background-color: black;border-radius: 100%;
}

那么此時太陽的眼睛有一個左有一個右，所以需要設置兩個樣式用于控制眼睛的位置，此時我們還需要注意到，接下來要繪制的粽子的眼睛也是有左右的，所以在這里需要設置樣式限制在 sun-body 之下，那么這兩個樣式如下：

.sun-body>.eye-left {top: 60px;left: 70px;
}.sun-body>.eye-right {top: 50px;left: 40px;
}

此時頁面效果如下：

在這里插入圖片描述

此時的太陽面無表情，不懂的還以為是少了一個洞的保齡球，所以表情還是很重要的，接著添加一個 smile 樣式讓太陽笑看人生，那這個樣式怎么做呢？畢竟這個嘴巴是就等于一個雪糕棒的樣子：

在這里插入圖片描述

那我們就先開始畫一個雪糕吧，就直接寫一個 smile 樣式，等下再改就好了；雪糕也是一個矩形，那么直接先給予一個矩形吧

.sun-body>.smile {position: absolute;width: 100px;height: 100px;background-color: #fdc2a6 50%;top: 70px;left: 245px;border: 4px black solid;
}

效果如下：

在這里插入圖片描述

那剩下的不就是給下面兩個圓角變圓不就好了？真是恍然大悟，直接給予樣式：

border-top-left-radius: 8%;
border-top-right-radius: 16%;
border-bottom-left-radius: 80%;
border-bottom-right-radius: 90%;

在這里插入圖片描述

那么再給這個嘴巴轉一下：

transform: rotate(20deg);

在這里插入圖片描述

如果你想做一些效果還可以沿著垂直方向變換一下，都可以。那么接下來直接定位，并且給予背景色就完成了：

.sun-body>.smile {position: absolute;width: 10px;height: 10px;background-color: #fdc2a6 50%;top: 70px;left: 45px;border: 4px black solid;border-top-left-radius: 8%;border-top-right-radius: 16%;border-bottom-left-radius: 80%;border-bottom-right-radius: 90%;transform: rotate(20deg);
}

在這里插入圖片描述

最后再加一些陽光，陽光就是圓嘛，很簡單的，所以直接寫好樣式：

.sunshine-top-left,
.sunshine-top-right,
.sunshine-bottom-left,
.sunshine-bottom-right {position: absolute;background-color: #a54a29;border-radius: 100%;
}.sunshine-top-left {height: 10px;width: 10px;left: -30px;top: -20px;
}.sunshine-top-right {height: 20px;width: 20px;left: 130px;top: 20px;
}.sunshine-bottom-left {height: 30px;width: 30px;left: -20px;top: 120px;
}.sunshine-bottom-right {height: 10px;width: 10px;left: 110px;top: 120px;
}

再調用即可：

<div class="sun-body"><div class="sun-eye eye-left"></div><div class="sun-eye eye-right"></div><div class="smile"></div><div class="sunshine-top-left"></div><div class="sunshine-top-right"></div><div class="sunshine-bottom-left"></div><div class="sunshine-bottom-right"></div>
</div>

在這里插入圖片描述

2.2 添加粽子

2.2.1 粽子 body

粽子的話就是里面的白花花的米和外面兩塊葉子和簡單的四肢：

在這里插入圖片描述

做起來是挺簡單的，葉子的話紋路我沒有添加，可以簡便加上去就好了，首先我們制作里面白花花的糯米和綠油油的葉子部分。

其實這個部分我是分為了上、右、下、左四個部分制作的：

在這里插入圖片描述

并且再考慮這些部分都是同一個物體，所以也需要一個容器對其進行包裹，首先給予一個容器樣式：

.rice-dumplings {height: 400px;width: 400px;position: absolute;transform: scale(0.5);left: 0;
}

接著先制作粽子的左半部分，其實左半部分也就是一個半圓進行變換而來，左右兩邊的樣式本質上是一致的，所以直接給予粽子上部分左右兩邊相同的樣式：

.rice-dumplings-body-left-top,
.rice-dumplings-body-right-top {position: absolute;background-color: #ffffff;height: 300px;width: 300px;border-top-left-radius: 100%;border: 4px black solid;border-right: 0px;
}

在上面的樣式中，由于右邊編劇是有邊框線的，直接去掉即可，所以使用了代碼 border-right: 0px;。

接著給予左右兩邊不一樣的變換以及位置信息：

.rice-dumplings-body-left-top {left: 25px;top: 25px;transform: rotateY(30deg) rotate(-10deg);
}.rice-dumplings-body-right-top {left: 235px;top: 25px;transform: rotateY(210deg) rotate(-10deg);
}

在這里插入圖片描述

這個時候就應該給這個目前來說像半個飯團的東西一點“遮羞布”了，也就是兩張葉子。

這兩張葉子的制作方式相似，也就是給圓角然后進行旋轉即可，在這里需要注意的是不同大小、角度的葉子變換效果不一樣，可以適當的調整效果，并且其內部的葉子紋路也可以通過漸變制作，在這里我是用了漸變色，也可以使用陰影為其添加層次感：

.rice-dumplings-body-left-bottom,
.rice-dumplings-body-right-bottom {position: absolute;background: linear-gradient(to bottom right, #459712 15%, #8ad35d 80%, #459712 100%);border-top-left-radius: 0%;border: 4px black solid;
}.rice-dumplings-body-left-bottom {height: 200px;width: 400px;top: 240px;left: 50px;border-bottom-left-radius: 100%;border-bottom-right-radius: 100%;border-top-right-radius: 100%;transform: rotate(15deg);
}.rice-dumplings-body-right-bottom {height: 200px;width: 250px;top: 260px;left: 250px;border-bottom-left-radius: 100%;border-bottom-right-radius: 20%;border-top-right-radius: 100%;transform: rotateY(180deg);
}

接著在代碼中進行調用：

<div class="rice-dumplings"><div class="rice-dumplings-body"><div class="rice-dumplings-body-left-top"></div><div class="rice-dumplings-body-right-top"></div><div class="rice-dumplings-body-left-bottom"></div><div class="rice-dumplings-body-right-bottom"></div></div>
</div>

此時效果如下：

在這里插入圖片描述

2.2.2 粽子 face

接著咱們開始制作這個粽子的臉部，這個臉部也需要在一個容器之內，所以繼續設置一個父容器：

.rice-dumplings-face {position: absolute;
}

接著制作這個臉部的眼睛，這個眼睛可以看到其內部還有一個亮點：

在這里插入圖片描述

這個亮點制作其實就是一個縮小版的白色圓點而已，所以現在就知道這個怎么做了，直接設置兩個黑點和兩個白點，使其在近似的位置就解決了：

.rice-dumplings-face {position: absolute;
}.rice-dumplings-eye {position: absolute;height: 30px;width: 30px;border-radius: 100%;background-color: black;
}.eye-left {left: 250px;top: 80px;
}.eye-right {left: 350px;top: 70px;
}.rice-dumplings-eye>.light {position: absolute;height: 10px;width: 10px;border-radius: 100%;background-color: white;
}.rice-dumplings-eye>.postion {right: 20%;top: 10%;
}.rice-dumplings-eye>.right {right: 20%;top: 10%;
}

以上樣式中 light 為亮點，創建一個基礎樣式后再創建左右樣式進行調用就可以了：

<div class="rice-dumplings-face"><div class="rice-dumplings-eye eye-left"><div class="light postion"></div></div><div class="rice-dumplings-eye eye-right"><div class="light postion"></div></div>
</div>

在這里插入圖片描述

接著制作兩個小臉蛋，也就是一個寬度大于高度的橢圓，設置其 before 文本為“///” 顏色為白就完美解決：

/*臉頰*/.cheek {position: absolute;top: 120px;background-color: #fd8373;border-radius: 100%;
}.cheek::before {position: absolute;content: "/ / /";color: white;left: 23%;top: 13%;
}.cheek-left {height: 40px;width: 80px;left: 190px;
}.cheek-right {height: 40px;width: 60px;left: 380px;
}

在這里插入圖片描述

接著嘴巴的樣式跟太陽的一樣，在這里只需要設置對應的漸變色一半為紅色一半為粉紅色即可：

.smile {position: absolute;width: 60px;height: 80px;background: linear-gradient( #fdc2a6 50%, #fa7768 50%);top: 120px;left: 300px;border: 4px black solid;border-top-left-radius: 8%;border-top-right-radius: 16%;border-bottom-left-radius: 80%;border-bottom-right-radius: 90%;
}

在這里插入圖片描述

由于其本身太陽也是相同樣式，所以背景色也應用到了太陽嘴巴之中，都是同一款嘴型。

2.2.3 粽子四肢

粽子的四肢制作那就更簡單了，直接設置一個 div 留有邊框，去掉其他邊框之后使用 before 或者 after 做手掌或者腳掌部分就可以了：

在這里插入圖片描述

此時我們給予樣式，調整好位置即可：

/*四肢*/
.arm-left {position: absolute;height: 100px;width: 100px;border: 6px black solid;border-top: 0px;border-left: 0px;transform: rotate(45deg);left: 160px;top: 160px;
}.arm-left::before {position: absolute;content: "";height: 50px;width: 30px;right: -15%;border-radius: 100%;background-color: black;
}.arm-left::after {position: absolute;content: "";height: 20px;width: 10px;right: 8%;top: 15%;border-radius: 100%;background-color: black;transform: rotate(-45deg);
}.arm-right {position: absolute;height: 130px;width: 100px;border-right: 6px black solid;left: 390px;top: -52px;transform: rotate(45deg);
}.arm-right::before {position: absolute;content: "";height: 50px;width: 30px;right: -15%;border-radius: 100%;background-color: black;
}.leg-left {position: absolute;height: 50px;width: 50px;border: 6px black solid;border-top: 0px;border-left: 0px;left: 160px;top: 435px;
}.leg-left::before {position: absolute;content: "";height: 30px;width: 15px;left: -15%;bottom: -30px;border-radius: 100%;background-color: black;
}.leg-right {position: absolute;height: 100px;width: 50px;border-right: 6px black solid;left: 250px;top: 463px;
}.leg-right::before {position: absolute;content: "";height: 30px;width: 15px;right: -35%;bottom: -10px;border-radius: 100%;background-color: black;transform: rotate(-90deg);
}

四肢位置代碼比較簡單，就是給予不同的邊框位置并且旋轉即可，然后 before 和 after 就是一個圓嘛，拿上背景色放到合適位置就可以了。

粽子角色該部分 html 如下：

<div class="rice-dumplings"><div class="rice-dumplings-body"><div class="rice-dumplings-body-left-top"></div><div class="rice-dumplings-body-right-top"></div><div class="rice-dumplings-body-left-bottom"></div><div class="rice-dumplings-body-right-bottom"></div></div><div class="rice-dumplings-face"><div class="rice-dumplings-eye eye-left"><div class="light postion"></div></div><div class="rice-dumplings-eye eye-right"><div class="light postion"></div></div><div class="cheek cheek-left"></div><div class="cheek cheek-right"></div><div class="smile"></div></div><div class="limbs"><div class="arm-left"></div><div class="arm-right"></div><div class="leg-left"></div><div class="leg-right"></div></div>
</div>

三、所有內容

最后加上文字后效果如下：

在這里插入圖片描述

由于文字部分其樣式就是很基礎了，在此沒必要贅述了，在最后我祝各位考生 金榜高粽！

最后在這里附加上所有代碼：

完整代碼：

<!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>Demo test</title><style>body {height: 100vh;width: 100vw;}.demo-area {height: 400px;width: 1200px;position: relative;background-color: #8bb72b;overflow: hidden;}body {display: flex;justify-content: center;align-items: center;height: 100vh;width: 100vw;}.rice-dumplings {height: 400px;width: 400px;position: absolute;transform: scale(0.5);left: 0;}.rice-dumplings-body-left-top,.rice-dumplings-body-right-top {position: absolute;background-color: #ffffff;height: 300px;width: 300px;border-top-left-radius: 100%;border: 4px black solid;border-right: 0px;}.rice-dumplings-body-left-top {left: 25px;top: 25px;transform: rotateY(30deg) rotate(-10deg);}.rice-dumplings-body-right-top {left: 235px;top: 25px;transform: rotateY(210deg) rotate(-10deg);}.rice-dumplings-body-left-bottom,.rice-dumplings-body-right-bottom {position: absolute;background: linear-gradient(to bottom right, #459712 15%, #8ad35d 80%, #459712 100%);border-top-left-radius: 0%;border: 4px black solid;}.rice-dumplings-body-left-bottom {height: 200px;width: 400px;top: 240px;left: 50px;border-bottom-left-radius: 100%;border-bottom-right-radius: 100%;border-top-right-radius: 100%;transform: rotate(15deg);}.rice-dumplings-body-right-bottom {height: 200px;width: 250px;top: 260px;left: 250px;border-bottom-left-radius: 100%;border-bottom-right-radius: 20%;border-top-right-radius: 100%;transform: rotateY(180deg);}.rice-dumplings-face {position: absolute;}.rice-dumplings-eye {position: absolute;height: 30px;width: 30px;border-radius: 100%;background-color: black;}.eye-left {left: 250px;top: 80px;}.eye-right {left: 350px;top: 70px;}.rice-dumplings-eye>.light {position: absolute;height: 10px;width: 10px;border-radius: 100%;background-color: white;}.rice-dumplings-eye>.postion {right: 20%;top: 10%;}.rice-dumplings-eye>.right {right: 20%;top: 10%;}.smile {position: absolute;width: 60px;height: 80px;background: linear-gradient( #fdc2a6 50%, #fa7768 50%);top: 120px;left: 300px;border: 4px black solid;border-top-left-radius: 8%;border-top-right-radius: 16%;border-bottom-left-radius: 80%;border-bottom-right-radius: 90%;}.cheek {position: absolute;top: 120px;background-color: #fd8373;border-radius: 100%;}.cheek::before {position: absolute;content: "/ / /";color: white;left: 23%;top: 13%;}.cheek-left {height: 40px;width: 80px;left: 190px;}.cheek-right {height: 40px;width: 60px;left: 380px;}.arm-left {position: absolute;height: 100px;width: 100px;border: 6px black solid;border-top: 0px;border-left: 0px;transform: rotate(45deg);left: 160px;top: 160px;}.arm-left::before {position: absolute;content: "";height: 50px;width: 30px;right: -15%;border-radius: 100%;background-color: black;}.arm-left::after {position: absolute;content: "";height: 20px;width: 10px;right: 8%;top: 15%;border-radius: 100%;background-color: black;transform: rotate(-45deg);}.arm-right {position: absolute;height: 130px;width: 100px;border-right: 6px black solid;left: 390px;top: -52px;transform: rotate(45deg);}.arm-right::before {position: absolute;content: "";height: 50px;width: 30px;right: -15%;border-radius: 100%;background-color: black;}.leg-left {position: absolute;height: 50px;width: 50px;border: 6px black solid;border-top: 0px;border-left: 0px;left: 160px;top: 435px;}.leg-left::before {position: absolute;content: "";height: 30px;width: 15px;left: -15%;bottom: -30px;border-radius: 100%;background-color: black;}.leg-right {position: absolute;height: 100px;width: 50px;border-right: 6px black solid;left: 250px;top: 463px;}.leg-right::before {position: absolute;content: "";height: 30px;width: 15px;right: -35%;bottom: -10px;border-radius: 100%;background-color: black;transform: rotate(-90deg);}/*太陽*/.sun {position: absolute;height: 150px;width: 150px;}.sun-body {position: absolute;height: 95px;width: 95px;background-color: #ff5f47;border-radius: 100%;border: 4px black solid;left: 30px;top: 30px;}.sun-eye {position: absolute;height: 10px;width: 10px;background-color: black;border-radius: 100%;}.sun-body>.eye-left {top: 60px;left: 70px;}.sun-body>.eye-right {top: 50px;left: 40px;}.sun-body>.smile {position: absolute;width: 10px;height: 10px;background-color: #fdc2a6 50%;top: 70px;left: 45px;border: 4px black solid;border-top-left-radius: 8%;border-top-right-radius: 16%;border-bottom-left-radius: 80%;border-bottom-right-radius: 90%;transform: rotate(20deg);}.sunshine-top-left,.sunshine-top-right,.sunshine-bottom-left,.sunshine-bottom-right {position: absolute;background-color: #a54a29;border-radius: 100%;}.sunshine-top-left {height: 10px;width: 10px;left: -30px;top: -20px;}.sunshine-top-right {height: 20px;width: 20px;left: 130px;top: 20px;}.sunshine-bottom-left {height: 30px;width: 30px;left: -20px;top: 120px;}.sunshine-bottom-right {height: 10px;width: 10px;left: 110px;top: 120px;}.circle {position: absolute;height: 400px;width: 1200px;}.circle1,.circle2,.circle3,.circle4,.circle5,.circle6,.circle7,.circle8 {position: absolute;border-radius: 100%;background-color: #0f893c;}.circle1 {height: 300px;width: 300px;bottom: -130px;}.circle2 {height: 150px;width: 150px;bottom: -30px;left: 270px}.circle3 {height: 30px;width: 30px;bottom: 10px;left: 430px}.circle4 {height: 60px;width: 60px;bottom: 10px;left: 530px}.circle5 {height: 160px;width: 260px;bottom: -130px;left: 530px}.circle6 {height: 60px;width: 160px;bottom: -30px;left: 730px}.circle7 {height: 60px;width: 160px;bottom: -30px;left: 780px}.circle8 {height: 160px;width: 160px;bottom: -80px;left: 880px}/*黃色圈*/.y-circle1,.y-circle2,.y-circle3,.y-circle4 {position: absolute;border-radius: 100%;background-color: #cdd622;}.y-circle1 {height: 60px;width: 60px;bottom: 180px;left: 880px}.y-circle2 {height: 30px;width: 30px;bottom: 280px;left: 780px}.y-circle3 {height: 10px;width: 10px;bottom: 380px;left: 720px}.y-circle4 {height: 20px;width: 20px;bottom: 290px;left: 680px}/* 云朵 */.cloud {position: absolute;width: 175px;height: 55px;background-color: white;border-radius: 100px;box-shadow: 0 1px 5px 0px rgba(50, 50, 50, 0.05);}.cloud:after,.cloud:before {content: "";position: absolute;background-color: white;}.cloud:after {width: 50px;height: 50px;border-radius: 50%;top: -54%;left: 14%;}.cloud:before {width: 100px;height: 100px;border-radius: 50%;top: -90%;right: 10%;}.cloud1 {transform: scale(1);opacity: 0.8;left: 100px;top: 410px;z-index: 1;}.cloud2 {left: 260px;top: 360px;transform: scale(1);opacity: 0.9;z-index: 1;}/* 文本內容 */.stroke {-webkit-text-stroke: 1px black;}.text1 {position: absolute;color: white;font-size: 30px;left: 600px;top: 30px;}.text2,.text3,.text4 {position: absolute;color: white;font-size: 80px;top: 40px;}.text5,.text6,.text7 {position: absolute;color: white;font-size: 80px;top: 130px;}.text2,.text5 {left: 600px;}.text3,.text6 {left: 603px;}.text4,.text7 {left: 605px;}.text2>.span1,.text3>.span1,.text4>.span1,.text5>.span1,.text6>.span1,.text7>.span1 {color: #fff644;-webkit-text-stroke: 2px black;}.rice-dumplings-text {background-color: #eef535;height: 300px;width: 100px;position: absolute;left: 380px;top: 40px;border-radius: 30px;color: #0f893c;writing-mode: vertical-rl;text-align: center;line-height: 100px;font-size: 80px;-webkit-text-stroke: 2px black;}/*C*/.C {position: absolute;top: 330px;left: 605px;height: 30px;width: 400px;background-color: #eef535;border-radius: 30px;text-align: center;line-height: 30px;}</style>
</head><body><div class="demo-area"><div class="cloud-main"><div class="cloud cloud1"></div><div class="cloud cloud2"></div></div><div class="circle"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div><div class="circle5"></div><div class="circle6"></div><div class="circle7"></div><div class="circle8"></div><div class="y-circle1"></div><div class="y-circle2"></div><div class="y-circle3"></div><div class="y-circle4"></div></div><div class="sun"><div class="sun-body"><div class="sun-eye eye-left"></div><div class="sun-eye eye-right"></div><div class="smile"></div><div class="sunshine-top-left"></div><div class="sunshine-top-right"></div><div class="sunshine-bottom-left"></div><div class="sunshine-bottom-right"></div></div></div><div class="rice-dumplings"><div class="rice-dumplings-body"><div class="rice-dumplings-body-left-top"></div><div class="rice-dumplings-body-right-top"></div><div class="rice-dumplings-body-left-bottom"></div><div class="rice-dumplings-body-right-bottom"></div></div><div class="rice-dumplings-face"><div class="rice-dumplings-eye eye-left"><div class="light postion"></div></div><div class="rice-dumplings-eye eye-right"><div class="light postion"></div></div><div class="smile"></div><div class="cheek cheek-left"></div><div class="cheek cheek-right"></div></div><div class="limbs"><div class="arm-left"></div><div class="arm-right"></div><div class="leg-left"></div><div class="leg-right"></div></div></div><div class="text"><h2 class="rice-dumplings-text">粽子</h2><h2 class="stroke text1">端午,祛毒平安</h2><h1 class="stroke text2"><span class="span1">旗開</span><span>得勝</span></h1><h1 class="stroke text3"><span class="span1">旗開</span><span>得勝</span></h1><h1 class="stroke text4"><span class="span1">旗開</span><span>得勝</span></h1><!--換個詞--><h1 class="stroke text5"><span>金榜</span><span class="span1">高粽</span></h1><h1 class="stroke text6"><span>金榜</span><span class="span1">高粽</span></h1><h1 class="stroke text7"><span>金榜</span><span class="span1">高粽</span></h1></div><div class="C"><span> 1_bit 沒事寫的《無用CSS技巧系列內容》</span></div></div>
</body></html>