朋友生日了，直接畫，炫技并且表示本人閑的全身疼才會去拿CSS畫畫，以此嘲弄對方的加班：
在這里插入圖片描述

既然賀卡做出來了，那就順便介紹一下賀卡制作流程吧，其實也不是什么技術，也就是CSS 拼拼拼就可以了，簡簡單單。

注：本篇內容無法逐一進行講解，只是講一下大概思路，之后會單獨把元素作為講解內容并且完善元素使其更加美觀。

一、基礎布局

首先這個賀卡是網頁居中的，那么直接給予一個 flex 不就好了？直接給 body ：

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

那么接下來我們的海報是有一個外邊框的，這個做起來也和粘單，直接先給予外部一個 div，然后寫一個樣式叫做 happy-border ：

.happy-border {background-color: white;height: 850px;width: 550px;display: flex;align-items: center;justify-content: center;border: 8px solid #72705bca;box-shadow: 50px 20px 10px rgb(213, 207, 207);
}

以上樣式其實就是定義了一個背景色，然后給予一個 flex 布局。

為啥要給一個 flex？
當然是等下里面的內容我要居中顯示，留一定的白底，這樣不就像一張卡片了？你說對不對？
說到這，有些朋友可能又會說你給 border 那么厚干啥？給那么厚肯定是因為是要邊框厚一點，這樣不就看起來更像一張卡片了？如果還覺得不像，我不是還給了一個 box shadow 做陰影嗎？
這樣不就做好了？你看下面的呈現效果：

在這里插入圖片描述
那么到了這一步是不是還看不到內部的白框？那怎么辦？那現在就給里面的元素添加一個父容器唄，父容器再給一個小于外面最大的這個容器的寬高就可以有白色邊緣了，上樣式：

.happy {height: 800px;width: 500px;position: relative;background-color: #feb0bd;overflow: hidden;
}

其實上面樣式就是給了一個div 一個大小，設置了 position，因為等下里面全部用 abslute ，這樣里面的內容就可以重重疊疊了，接下來再調用：

<div class="happy-border"><div class="happy"></div></div>

效果就是下面這樣了：

在這里插入圖片描述

二、烘托氣氛的旗子

基礎內容搞定了我們給這個賀卡加點裝飾吧，首先就從旗子開始。

這個旗子呢就是一個三角形和一根線，那怎么搞這個呢？
在這里插入圖片描述
這個很簡單，咱們先畫個三角形嘛，那三角形怎么畫？三角形很有多方式畫，咱們直接用一個漸變背景來畫：

/*棋子的三角形*/.triangle {width: 50px;height: 50px;background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #e7f7c5 50%, #e7f7c5 100%);
}

你看上面的樣式，就定義一個大小后直接給予背景為漸變就好了，你漸變一部分為透明 transparent 一部分為一種顏色不就ok了？并且在這里我壓根就沒有進行漸變，因為我漸變到的顏色都是一致的，所以直接就會呈現一種顏色，并且漸變方向是左上角到右下角，那么斜對角分一半，肯定是三角形。

那么接下來直接調用：

<!--小旗子-->
<div class="ribbon"><div class="triangle"></div>
</div>

效果：
在這里插入圖片描述
那么接下來就給一根線吧，那線段怎么做？其實線段你就直接給予一個 div，然后背景色透明，邊緣圓角超出邊框則 hidden 不就ok了？這樣只有一個圓的邊框一部分，那就是一條弧線，完美：

.cord {width: 800px;height: 300px;left: -180px;top: -310px;background-color: transparent;border: 1px solid rgba(41, 41, 41, 0.5);border-radius: 100%;transform: rotate(-15deg);
}

以上樣式還用了 rotate，如果你覺得角度不對你就 rotate 就ok了，效果：
在這里插入圖片描述
在此一定要注意還要給這線段和三角形 position 為 absolute，因為接下來還要定位。定位這一個過程我就不再贅述了，不就是left bottom 給值不久好了？下面是這一段的代碼：

/*旗子的三角形*/.triangle {width: 50px;height: 50px;background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #e7f7c5 50%, #e7f7c5 100%);
}.triangle-1 {top: 30px;left: -10px;transform: rotate(-30deg);
}.triangle-2 {top: 30px;left: 30px;transform: rotate(-45deg);background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #c5e4f9 50%, #c5e4f9 100%);
}.triangle-3 {top: 27px;left: 80px;transform: rotate(-65deg);background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #b3fdc4 50%, #b3fdc4 100%);
}.triangle-4 {top: 13px;left: 120px;transform: rotate(-25deg);background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #e7d7ff 50%, #e7d7ff 100%);
}.triangle-5 {top: 10px;left: 170px;transform: rotate(-55deg);background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #f466b1 50%, #f466b1 100%);
}.triangle-6 {top: -3px;left: 220px;transform: rotate(-75deg);background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #f1c13b 50%, #f1c13b 100%);
}.triangle-7 {top: -11px;left: 260px;transform: rotate(-45deg);background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #f74631 50%, #f74631 100%);
}.triangle-8 {top: -36px;left: 310px;transform: rotate(-25deg);background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #d279b3 50%, #d279b3 100%);
}

效果就是如下呈現了：

在這里插入圖片描述

三、烘托氣氛的氣球

接下來就開始畫氣球吧。

氣球咋一看就簡單多了，但是你又沒有注意這里：

在這里插入圖片描述

這幾個節的形狀要怎么做？有點像一個橢圓。

這個先不急，咱們先把簡單的氣球搞定吧，也就是一個div 設置為圓里面有兩個亮點而已，然后就豎著的一個 div 當作一個線就完畢了。

首先是一個圓：

.balloon>.circle {width: 60px;height: 60px;border-radius: 100%;background-color: #f74631;border: 2px solid black;
}

這個很簡單，就真的是個圓，接下來就直接使用這個元素的 after 和 before 做亮點就好了：

.balloon>.circle::after {position: absolute;content: "";width: 10px;height: 10px;left: 25px;top: 30px;background-color: #ee8377;border-radius: 100%;
}.balloon>.circle::before {position: absolute;content: "";width: 6px;height: 6px;left: 35px;top: 40px;background-color: #ee8377;border-radius: 100%;
}

以上亮點沒有什么技術含量，一樣的操作只不過移動了一下位置而已，隨后就是氣球的線段了：

.balloon-line {height: 30px;width: 2px;background-color: black;left: 30px;top: 62px;
}

那氣球下面的結怎么做呢？咱們先看看這個結節：
在這里插入圖片描述

懂的朋友一看就知道，這不就是一個div 然后給予圓角不就好了？對呀，就是這樣，下面是這個結節的 CSS：

.balloon-cord {position: absolute;height: 10px;width: 10px;top: 305px;left: 82px;background-color: pink;border-radius: 100%;transform: rotate(20deg);border-bottom: 3px solid black;border-left: 2px solid black;border-right: 2px solid black;z-index: 3;
}

當然你還要調整角度，所以在上面的代碼中我還用了 rotate，那么跟旗子一樣，咱們創建多個氣球拼接在一起，并且繪制一下弧線，拼接在一起，布局到整個頁面之上，那么此時頁面就是這樣了：
在這里插入圖片描述

氣球定位及氣球的樣式代碼：

/*氣球*/.balloon-main,
.balloon,
.balloon>.circle,
.balloon-line,
.balloon-cord,
.balloon-cord1 {position: absolute;
}.balloon-main {transform: rotate(5deg);z-index: 3;
}.balloon-main1 {top: 50px;right: 190px;transform: rotate(-35deg) scale(0.5);
}.balloon-main2 {top: 480px;right: 90px;transform: rotate(11deg) scale(0.3);
}.balloon-main3 {top: 630px;right: 190px;transform: rotate(-31deg) scale(0.3);
}.balloon>.circle {width: 60px;height: 60px;border-radius: 100%;background-color: #f74631;border: 2px solid black;
}.balloon>.circle::after {position: absolute;content: "";width: 10px;height: 10px;left: 25px;top: 30px;background-color: #ee8377;border-radius: 100%;
}.balloon>.circle::before {position: absolute;content: "";width: 6px;height: 6px;left: 35px;top: 40px;background-color: #ee8377;border-radius: 100%;
}.balloon1,
.balloon2,
.balloon3,
.balloon4 {z-index: 3;
}.balloon1 {top: 100px;left: 100px;
}.balloon2 {top: 120px;left: 30px;transform: rotate(-45deg) scale(0.9);
}.balloon2>.circle {background-color: #c6feff;
}.balloon2>.circle::after,
.balloon2>.circle::before {background-color: #a3e7f8;
}.balloon3 {top: 150px;left: 30px;transform: rotate(-45deg) scale(1.1);
}.balloon3>.circle {background-color: #ffd458;
}.balloon3>.circle::after,
.balloon3>.circle::before {background-color: #ffedbe;
}.balloon4 {top: 150px;left: 85px;transform: rotate(15deg) scale(1.5);
}.balloon4>.circle {background-color: #d179b3;
}.balloon4>.circle::after,
.balloon4>.circle::before {background-color: #f78ed2;
}.balloon5 {top: 150px;left: -20px;transform: rotate(-15deg) scale(2);z-index: 2;
}.balloon5>.circle {background-color: #b3fec4;
}.balloon5>.circle::after,
.balloon5>.circle::before {background-color: #ceeed5;
}.balloon6 {top: 110px;left: 150px;transform: rotate(35deg) scale(2.2);z-index: 1;
}.balloon6>.circle {background-color: #7b9bce;
}.balloon6>.circle::after,
.balloon6>.circle::before {background-color: #c2d6f2;
}.balloon-line {height: 30px;width: 2px;background-color: black;left: 30px;top: 62px;
}
/*綁氣球的線*/.balloon-cord {height: 10px;width: 10px;top: 305px;left: 82px;background-color: pink;border-radius: 100%;transform: rotate(20deg);border-bottom: 3px solid black;border-left: 2px solid black;border-right: 2px solid black;z-index: 3;
}.balloon-cord1 {height: 100px;width: 100px;top: 315px;left: 65px;z-index: 3;background-color: transparent;overflow: hidden;
}.balloon-cord1>.line {position: absolute;
}.balloon-cord1>.line1,
.balloon-cord1>.line2 {width: 120px;height: 180px;border: 2px solid black;border-radius: 100%;
}.balloon-cord1>.line1 {top: -23px;left: 10px;transform: rotate(-15deg);
}.balloon-cord1>.line2 {top: -23px;left: 20px;transform: rotate(-30deg);
}

四、背景相框

相框制作就很簡單了，咱們可以先看看相框的樣子：

在這里插入圖片描述

這個相框制作就很簡單，兩個白色邊框的div重疊，其中一個旋轉不就好了？簡單先上樣式：

/*相框*/.frame,
.frame>.box1,
.frame>.box2 {position: absolute;
}.frame {top: 180px;left: 35px;z-index: 1;
}.frame>.box1 {width: 400px;height: 400px;border: 10px solid white;background-color: #fbdadf;
}.frame>.box2 {top: 30px;left: 45px;width: 350px;height: 350px;border: 10px solid white;background-color: #feb0bd;transform: rotate(-15deg);
}

下面就是相框的 html 代碼了：

<!--相框-->
<div class="frame"><div class="box1"></div><div class="box2"></div>
</div>

幾個 div 輕松解決。

五、蛋糕

其實蛋糕也是相對于比較簡單，就是不同的 div 進行疊加：
在這里插入圖片描述

咱們可以先做最下面一層蛋糕：
在這里插入圖片描述
這樣一看不就是一個黃色 div 上面拼白色的div 和一些小半圓？對的，下面就是樣式：

.cake-main {transform: rotate(-15deg) scale(1.2);right: -85px;
}.cake {height: 80px;width: 190px;background-color: #fcf18e;
}.cream {background-color: white;height: 20px;width: 100%;top: 40px;
}.icing {background-color: white;height: 15px;width: 30px;border-radius: 0 0 100% 100%;
}.icing1 {left: 5px;
}.icing2 {left: 35px;
}.icing3 {left: 65px;
}.icing4 {left: 95px;
}.icing5 {left: 125px;
}.icing6 {left: 155px;
}

cream 樣式就是簡單的一個白色 div，而 icing 從樣式看也就是一個半圓，剩下的 icing1-6 也只是定位不同而已。

那么此時就完成了這個樣式制作，剩下的幾層只需要給予一個屬性 scale 使其縮小并且移動位置即可：

.cake1 {top: -70px;transform: scale(0.8);
}.cake2 {top: -125px;transform: scale(0.6);
}

你看上面的 cake1 和 cake2 就是這樣寫的，此時頁面如下：
在這里插入圖片描述

那么接下來的蠟燭就是一個白色 div 加一個有點像火苗的圓角 div：

.candle {background-color: #f8f8f8;height: 50px;width: 15px;z-index: -3;bottom: 60px;left: 88px;top: -152px;
}.flame {background-color: #fbb200;height: 18px;width: 18px;border-radius: 0 50% 50% 50%;top: -22px;transform: rotate(45deg);
}

在這里插入圖片描述

六、禮物盒

禮物盒制作也就是幾個 div 的拼湊，本質上還是很簡單的。

在這里插入圖片描述

上面的系帶就是幾個圓角 div 透明背景色并且移動轉換，并且這些部分一共有頭部、底部、繩子、頂部、還有系帶（花），我們先看盒子和彩帶的 div，首先肯定要給這些部位 absolute 屬性：

.gift-main,
.gift-main>.box-bottom,
.gift-main>.box-top,
.gift-main>.cord,
.gift-main>.gift-cord,
.gift-main>.gift-flower {position: absolute;
}

隨后定位盒子的父容器

.gift-main {top: 690px;left: 30px;
}

接著我們將底部也就是整個盒子 body 弄一個漸變色的背景：

.gift-main>.box-bottom {width: 100px;height: 110px;background: repeating-linear-gradient(to right bottom, #cce1f9 0%, #cce1f9 5%, #f7f1c1 10%, #f7f1c1 15%);
}

接著頂部盒子給予一定的圓角：

.gift-main>.box-top {width: 110px;height: 20px;background-color: #a2b9e3;left: -5px;border-radius: 5px;
}

接著就是豎著的帶子：

.gift-main>.gift-cord {height: 130px;width: 15px;background-color: #f1f4fb;left: 40px;
}

最后就是頂部的系帶（花）：

.gift-main>.gift-flower {height: 30px;width: 20px;background-color: transparent;border: 3px #efeff4 solid;top: -30px;left: 35px;border-radius: 100%;
}

此時效果如下：

在這里插入圖片描述

現在頂部的花就像一個環，那么我們需要多加幾個花所有有多幾個樣式，移動旋轉不同的角度，那么樣式如下：

.gift-main>.gift-flower1 {left: 45px;transform: rotate(35deg) rotateY(60deg);
}.gift-main>.gift-flower2 {left: 23px;transform: rotate(-35deg) rotateY(-60deg);
}.gift-main>.gift-flower3 {top: -25px;left: 16px;transform: rotate(-85deg) rotateY(-60deg);
}.gift-main>.gift-flower4 {top: -25px;left: 52px;transform: rotate(85deg) rotateY(60deg);
}

其余的我就不寫出來了，最后你們可以直接看底部源碼，那么此時的盒子就如下顯示：
在這里插入圖片描述
那么再創建多個盒子移動位置即可：

在這里插入圖片描述

七、完整內容

生日帽子主要是頂部一個圓，主體為一個三角形，下面的圓包裹掩蓋住邊緣即可實現：
在這里插入圖片描述

由于接下來的實現方法以及文本內容過于簡單，在此不再過多贅述，下面直接貼上全部代碼小伙伴參考即可，之后我再把這些元素細節加上逐個內容添加細節并講解，在此只是大概講解思路。

那么所有代碼如下：

<!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>Happy</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;width: 100vw;}.happy-border {background-color: white;height: 850px;width: 550px;display: flex;align-items: center;justify-content: center;border: 8px solid #72705bca;box-shadow: 50px 20px 10px rgb(213, 207, 207);}.happy {height: 800px;width: 500px;position: relative;background-color: #feb0bd;background-position: 0 0, 100px 100px;background-size: 200px 200px;overflow: hidden;}/*absolute 定位*/.triangle,.cord {position: absolute;}/*菜帶*/.ribbon,.ribbon1,.ribbon2,.ribbon3,.ribbon4 {position: absolute;}.ribbon1 {top: -105px;left: 210px;transform: rotate(35deg);}.ribbon2 {top: 505px;left: 10px;transform: rotate(-90deg) scale(0.5);}.ribbon4 {top: 705px;left: -60px;width: 400px;height: 100px;transform: rotate(0deg) scale(0.6) rotateX(180deg);z-index: 5;}/**繩子*/.cord {width: 800px;height: 300px;left: -180px;top: -310px;background-color: transparent;border: 1px solid rgba(41, 41, 41, 0.5);border-radius: 100%;transform: rotate(-15deg);}/*旗子的三角形*/.triangle {width: 50px;height: 50px;background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #e7f7c5 50%, #e7f7c5 100%);}.triangle-1 {top: 30px;left: -10px;transform: rotate(-30deg);}.triangle-2 {top: 30px;left: 30px;transform: rotate(-45deg);background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #c5e4f9 50%, #c5e4f9 100%);}.triangle-3 {top: 27px;left: 80px;transform: rotate(-65deg);background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #b3fdc4 50%, #b3fdc4 100%);}.triangle-4 {top: 13px;left: 120px;transform: rotate(-25deg);background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #e7d7ff 50%, #e7d7ff 100%);}.triangle-5 {top: 10px;left: 170px;transform: rotate(-55deg);background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #f466b1 50%, #f466b1 100%);}.triangle-6 {top: -3px;left: 220px;transform: rotate(-75deg);background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #f1c13b 50%, #f1c13b 100%);}.triangle-7 {top: -11px;left: 260px;transform: rotate(-45deg);background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #f74631 50%, #f74631 100%);}.triangle-8 {top: -36px;left: 310px;transform: rotate(-25deg);background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #d279b3 50%, #d279b3 100%);}/*氣球*/.balloon-main,.balloon,.balloon>.circle,.balloon-line,.balloon-cord,.balloon-cord1 {position: absolute;}.balloon-main {transform: rotate(5deg);z-index: 3;}.balloon-main1 {top: 50px;right: 190px;transform: rotate(-35deg) scale(0.5);}.balloon-main2 {top: 480px;right: 90px;transform: rotate(11deg) scale(0.3);}.balloon-main3 {top: 630px;right: 190px;transform: rotate(-31deg) scale(0.3);}.balloon>.circle {width: 60px;height: 60px;border-radius: 100%;background-color: #f74631;border: 2px solid black;}.balloon>.circle::after {position: absolute;content: "";width: 10px;height: 10px;left: 25px;top: 30px;background-color: #ee8377;border-radius: 100%;}.balloon>.circle::before {position: absolute;content: "";width: 6px;height: 6px;left: 35px;top: 40px;background-color: #ee8377;border-radius: 100%;}.balloon1,.balloon2,.balloon3,.balloon4 {z-index: 3;}.balloon1 {top: 100px;left: 100px;}.balloon2 {top: 120px;left: 30px;transform: rotate(-45deg) scale(0.9);}.balloon2>.circle {background-color: #c6feff;}.balloon2>.circle::after,.balloon2>.circle::before {background-color: #a3e7f8;}.balloon3 {top: 150px;left: 30px;transform: rotate(-45deg) scale(1.1);}.balloon3>.circle {background-color: #ffd458;}.balloon3>.circle::after,.balloon3>.circle::before {background-color: #ffedbe;}.balloon4 {top: 150px;left: 85px;transform: rotate(15deg) scale(1.5);}.balloon4>.circle {background-color: #d179b3;}.balloon4>.circle::after,.balloon4>.circle::before {background-color: #f78ed2;}.balloon5 {top: 150px;left: -20px;transform: rotate(-15deg) scale(2);z-index: 2;}.balloon5>.circle {background-color: #b3fec4;}.balloon5>.circle::after,.balloon5>.circle::before {background-color: #ceeed5;}.balloon6 {top: 110px;left: 150px;transform: rotate(35deg) scale(2.2);z-index: 1;}.balloon6>.circle {background-color: #7b9bce;}.balloon6>.circle::after,.balloon6>.circle::before {background-color: #c2d6f2;}.balloon-line {height: 30px;width: 2px;background-color: black;left: 30px;top: 62px;}/*綁氣球的線*/.balloon-cord {height: 10px;width: 10px;top: 305px;left: 82px;background-color: pink;border-radius: 100%;transform: rotate(20deg);border-bottom: 3px solid black;border-left: 2px solid black;border-right: 2px solid black;z-index: 3;}.balloon-cord1 {height: 100px;width: 100px;top: 315px;left: 65px;z-index: 3;background-color: transparent;overflow: hidden;}.balloon-cord1>.line {position: absolute;}.balloon-cord1>.line1,.balloon-cord1>.line2 {width: 120px;height: 180px;border: 2px solid black;border-radius: 100%;}.balloon-cord1>.line1 {top: -23px;left: 10px;transform: rotate(-15deg);}.balloon-cord1>.line2 {top: -23px;left: 20px;transform: rotate(-30deg);}/*相框*/.frame,.frame>.box1,.frame>.box2 {position: absolute;}.frame {top: 180px;left: 35px;z-index: 1;}.frame>.box1 {width: 400px;height: 400px;border: 10px solid white;background-color: #fbdadf;}.frame>.box2 {top: 30px;left: 45px;width: 350px;height: 350px;border: 10px solid white;background-color: #feb0bd;transform: rotate(-15deg);}/*蛋糕*/.cake-main,.cake1,.icing,.candle,.cream,.cake,.flame {position: absolute;}.cake-main {transform: rotate(-15deg) scale(1.2);right: -85px;}.cake {height: 80px;width: 190px;background-color: #fcf18e;}.cake1 {top: -70px;transform: scale(0.8);}.cake2 {top: -125px;transform: scale(0.6);}.cake-main {left: 180px;top: 490px;z-index: 3;}.cream {background-color: white;height: 20px;width: 100%;top: 40px;}.icing {background-color: white;height: 15px;width: 30px;border-radius: 0 0 100% 100%;}.icing1 {left: 5px;}.icing2 {left: 35px;}.icing3 {left: 65px;}.icing4 {left: 95px;}.icing5 {left: 125px;}.icing6 {left: 155px;}.candle {background-color: #f8f8f8;height: 50px;width: 15px;z-index: -3;bottom: 60px;left: 88px;top: -152px;}.flame {background-color: #fbb200;height: 18px;width: 18px;border-radius: 0 50% 50% 50%;top: -22px;transform: rotate(45deg);}/*禮盒*/.gift-main,.gift-main>.box-bottom,.gift-main>.box-top,.gift-main>.cord,.gift-main>.gift-cord,.gift-main>.gift-flower {position: absolute;}.gift-main {top: 690px;left: 30px;}.gift-main>.box-bottom {width: 100px;height: 110px;background: repeating-linear-gradient(to right bottom, #cce1f9 0%, #cce1f9 5%, #f7f1c1 10%, #f7f1c1 15%);}.gift-main>.box-top {width: 110px;height: 20px;background-color: #a2b9e3;left: -5px;border-radius: 5px;}.gift-main>.gift-cord {height: 130px;width: 15px;background-color: #f1f4fb;left: 40px;}.gift-main>.gift-flower {height: 30px;width: 20px;background-color: transparent;border: 3px #efeff4 solid;top: -30px;left: 35px;border-radius: 100%;}.gift-main>.gift-flower1 {left: 45px;transform: rotate(35deg) rotateY(60deg);}.gift-main>.gift-flower2 {left: 23px;transform: rotate(-35deg) rotateY(-60deg);}.gift-main>.gift-flower3 {top: -25px;left: 16px;transform: rotate(-85deg) rotateY(-60deg);}.gift-main>.gift-flower4 {top: -25px;left: 52px;transform: rotate(85deg) rotateY(60deg);}.gift-main1 {top: 730px;left: 140px;}.gift-main1>.box-bottom,.gift-main3>.box-bottom,.gift-main5>.box-bottom {background: repeating-linear-gradient(to left bottom, #fdf6c0 0%, #fdf6c0 5%, #f2e280 10%, #f2e280 15%);}.gift-main1>.box-top,.gift-main3>.box-top,.gift-main5>.box-top {background-color: #f2e280;}.gift-main1>.gift-cord,.gift-main3>.gift-cord,.gift-main5>.gift-cord {background-color: #c9dafb;}.gift-main2 {top: 700px;left: 240px;}.gift-main3 {top: 780px;left: 350px;}.gift-main4 {top: 730px;left: 450px;}.gift-main5 {top: 730px;left: 0px;}/* 文本內容 */.text,.textbg,.textbg>.text,.textbg1,.bybg {position: absolute;}.text {width: 500px;height: 200px;position: absolute;z-index: 4;right: 0;top: 150px;color: #f74232;}.text15 {transform: rotate(15deg);left: 360px;top: 180px;color: rgb(110, 110, 226);}.text1 {font-size: 110px;}.textbg,.bybg {width: 450px;height: 60px;border: 3px #c2364b solid;background-color: #ffeae8;top: 550px;left: 20px;z-index: 3;transform: rotate(10deg);}.textbg1 {top: 7px;width: 450px;height: 40px;border: 2px #c2364b dashed;z-index: 4;}.textbg>.text {top: 15px;left: 40px;font-size: 20px;font-weight: 800;color: #cc5c4b;}.bybg {width: 280px;height: 30px;border: 3px #c2364b solid;background-color: #f54a3b;top: 610px;}.bybg>.text {top: 8px;left: 50px;font-size: 10px;font-weight: 800;color: white;}/*帽子*/.hat,.hat>.body,.hat>.top,.hat>.bottom,.hat>.bottom1,.hat>.bottom2,.hat>.bottom3,.hat>.bottom4,.hat>.bottom5,.hat>.bottom6,.hat>.bottom7,.hat>.bottom8,.hat>.bottom9,.hat>.bottom10,.hat>.bottom11 {position: absolute;z-index: 3;}.hat {width: 100px;height: 150px;top: 100px;left: 240px;z-index: 4;transform: rotate(-30deg);}.hat>.body {width: 0;border-top: 50px solid transparent;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 130px solid #799cce;top: -40px;}.hat>.top,.hat>.bottom,.hat>.bottom1,.hat>.bottom2,.hat>.bottom3,.hat>.bottom4,.hat>.bottom5,.hat>.bottom6,.hat>.bottom7,.hat>.bottom8,.hat>.bottom9,.hat>.bottom10,.hat>.bottom11 {height: 20px;width: 20px;left: 42px;background-color: #f74232;border-radius: 100%;}.hat>.bottom1 {bottom: 0;background-color: #d4f3dc;}.hat>.bottom2 {bottom: 1px;left: 25px;}.hat>.bottom3 {bottom: 1px;left: 60px;}.hat>.bottom4 {bottom: 2px;left: 10px;background-color: #d4f3dc;}.hat>.bottom5 {bottom: 2px;left: 76px;background-color: #d4f3dc;}.hat>.bottom6 {bottom: 3px;left: 0px;}.hat>.bottom7 {bottom: 3px;left: 85px;}.hat>.bottom8 {bottom: 5px;left: -13px;background-color: #d4f3dc;z-index: 2;}.hat>.bottom9 {bottom: 5px;left: 92px;background-color: #d4f3dc;z-index: 2;}.hat>.bottom10 {bottom: 10px;left: -11px;z-index: 1;}.hat>.bottom11 {bottom: 10px;left: 88px;z-index: 1;}</style>
</head><body><div class="happy-border"><div class="happy"><!--小旗子--><div class="ribbon"><div class="cord"></div><div class="triangle triangle-1"></div><div class="triangle triangle-2"></div><div class="triangle triangle-3"></div><div class="triangle triangle-4"></div><div class="triangle triangle-5"></div><div class="triangle triangle-6"></div><div class="triangle triangle-7"></div><div class="triangle triangle-8"></div></div><!--彩旗--><div class="ribbon1"><div class="cord"></div><div class="triangle triangle-1"></div><div class="triangle triangle-2"></div><div class="triangle triangle-3"></div><div class="triangle triangle-4"></div><div class="triangle triangle-5"></div><div class="triangle triangle-6"></div><div class="triangle triangle-7"></div><div class="triangle triangle-8"></div></div><!--旗子--><div class="ribbon4"><div class="cord"></div><div class="triangle triangle-1"></div><div class="triangle triangle-2"></div><div class="triangle triangle-3"></div><div class="triangle triangle-4"></div><div class="triangle triangle-5"></div><div class="triangle triangle-6"></div><div class="triangle triangle-7"></div><div class="triangle triangle-8"></div></div><!--氣球--><div class="balloon-main"><div class="balloon balloon1"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon2"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon3"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon4"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon5"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon6"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon-cord"></div><div class="balloon-cord1"><div class="line line1"></div><div class="line line2"></div></div></div><div class="balloon-main balloon-main1"><div class="balloon balloon1"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon2"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon3"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon4"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon5"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon6"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon-cord"></div><div class="balloon-cord1"><div class="line line1"></div><div class="line line2"></div></div></div><div class="balloon-main balloon-main2"><div class="balloon balloon1"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon2"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon3"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon4"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon5"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon6"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon-cord"></div><div class="balloon-cord1"><div class="line line1"></div><div class="line line2"></div></div></div><div class="balloon-main balloon-main3"><div class="balloon balloon1"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon2"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon3"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon4"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon5"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon balloon6"><div class="circle"></div><div class="balloon-line"></div></div><div class="balloon-cord"></div><div class="balloon-cord1"><div class="line line1"></div><div class="line line2"></div></div></div><!--相框--><div class="frame"><div class="box1"></div><div class="box2"></div></div><!--蛋糕--><div class="cake-main"><div class="cake"><div class="cream"></div><div class="icing icing1"></div><div class="icing icing2"></div><div class="icing icing3"></div><div class="icing icing4"></div><div class="icing icing5"></div><div class="icing icing6"></div></div><div class="cake cake1"><div class="cream"></div><div class="icing icing1"></div><div class="icing icing2"></div><div class="icing icing3"></div><div class="icing icing4"></div><div class="icing icing5"></div><div class="icing icing6"></div></div><div class="cake cake2"><div class="cream"></div><div class="icing icing1"></div><div class="icing icing2"></div><div class="icing icing3"></div><div class="icing icing4"></div><div class="icing icing5"></div><div class="icing icing6"></div></div><div class="candle"><div class="flame"></div></div></div><!--禮盒--><div><div class="gift-main"><div class="box-bottom"></div><div class="box-top"></div><div class="gift-cord"></div><div class="gift-flower"></div><div class="gift-flower gift-flower1"></div><div class="gift-flower gift-flower2"></div><div class="gift-flower gift-flower3"></div><div class="gift-flower gift-flower4"></div></div><div class="gift-main gift-main1"><div class="box-bottom"></div><div class="box-top"></div><div class="gift-cord"></div><div class="gift-flower"></div><div class="gift-flower gift-flower1"></div><div class="gift-flower gift-flower2"></div><div class="gift-flower gift-flower3"></div><div class="gift-flower gift-flower4"></div></div><div class="gift-main gift-main2"><div class="box-bottom"></div><div class="box-top"></div><div class="gift-cord"></div><div class="gift-flower"></div><div class="gift-flower gift-flower1"></div><div class="gift-flower gift-flower2"></div><div class="gift-flower gift-flower3"></div><div class="gift-flower gift-flower4"></div></div><div class="gift-main gift-main3"><div class="box-bottom"></div><div class="box-top"></div><div class="gift-cord"></div><div class="gift-flower"></div><div class="gift-flower gift-flower1"></div><div class="gift-flower gift-flower2"></div><div class="gift-flower gift-flower3"></div><div class="gift-flower gift-flower4"></div></div><div class="gift-main gift-main4"><div class="box-bottom"></div><div class="box-top"></div><div class="gift-cord"></div><div class="gift-flower"></div><div class="gift-flower gift-flower1"></div><div class="gift-flower gift-flower2"></div><div class="gift-flower gift-flower3"></div><div class="gift-flower gift-flower4"></div></div><div class="gift-main gift-main5"><div class="box-bottom"></div><div class="box-top"></div><div class="gift-cord"></div><div class="gift-flower"></div><div class="gift-flower gift-flower1"></div><div class="gift-flower gift-flower2"></div><div class="gift-flower gift-flower3"></div><div class="gift-flower gift-flower4"></div></div></div><!--帽子--><div class="hat"><div class="body"></div><div class="top"></div><div class="bottom1"></div><div class="bottom2"></div><div class="bottom3"></div><div class="bottom4"></div><div class="bottom5"></div><div class="bottom6"></div><div class="bottom7"></div><div class="bottom8"></div><div class="bottom9"></div><div class="bottom10"></div><div class="bottom11"></div></div><!--生日快樂--><div class="text" style="-webkit-text-stroke: 3px white;"><h1 class="text1"><span class="span1">Happy</span><span>Birthday</span></h1></div><div class="text text15" style="-webkit-text-stroke: 3px white;"><h1 class="text1"><span class="span1">15</span></h1></div><!--板塊文本--><div class="textbg"><div class=" textbg1"></div><div class="text">年年皆勝意，歲歲都歡愉，生日快樂！</div></div><!--by 署名--><div class="bybg"><div class="text">1_bit 用無用代碼祝 某某某 生日快樂！</div></div></div></div>
</body></html>