4
纯 CSS 画一张生日贺卡祝 InfoQ 生日快乐
作者：1_bit
- 2022 年 6 月 08 日
本文字数：23024 字
阅读完需：约 76 分钟
InfoQ 15 岁生日了，还是个宝宝，既然是技术社区，那咱们就用技术送一张贺卡给 infoQ 吧，生日快乐：
既然贺卡做出来了，那就顺便介绍一下贺卡制作流程吧，其实也不是什么技术，也就是 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"> 年年皆胜意，岁岁都欢愉，InfoQ 生日快乐！ </div> </div> <!--by 署名--> <div class="bybg"> <div class="text"> 1_bit 用无用代码祝 infoQ 生日快乐！ </div> </div>
</div> </div></body>
</html>
复制代码
最后祝 infoQ 越办越好 蒸蒸日上
划线
评论
复制
发布于: 42 分钟前阅读数: 52
版权声明: 本文为 InfoQ 作者【1_bit】的原创文章。
原文链接:【http://xie.infoq.cn/article/93677dafe02f4e0948a40b504】。文章转载请联系作者。
1_bit
关注
还未添加个人签名 2021.02.05 加入
InfoQ签约作者 CSDN博客专家、博客之星TOP5、新星导师、第二季新星评委、博客新星评审团 蓝桥签约作者 动漫系列编程作者 2021年火爆C站的大话教程作者 目前正在深入学习画漫画，之后将会自制动漫视频。
评论