纯html+css打造一款特殊的生日贺卡

效果显示：

<!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: 300px;height: 40px;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">23</span></h1></div><!--板块文本--><div class="textbg"><div class=" textbg1"></div><div class="text">年年皆胜意，岁岁都欢愉，生日快乐！</div></div><!--by 署名--><div class="bybg"><div class="text" style="font-size: 16px; text-align: left;">勇敢牛牛代码祝<span style="color: greenyellow; font-size: 20px;">Tong</span>生日快乐！</div></div></div></div>
</body></html>

纯html+css打造一款特殊的生日贺卡相关推荐

JS+CSS打造一款漂亮绿色相册代码
代码简介: JavaScript+CSS完成的漂亮相册展示效果,运用了大量CSS代码,JS代码并不多,它可以自动获取链接图片的地址以及TITLE标签的信息,当鼠标点击小图的时候它就会自动加载大图,类似 ...
纯html css博客,纯HTML+CSS打造动画
纯CSS动画 .tank{ width:200px; height:100px; margin:100px auto; border:2px solid blue; border-radius:0 0 ...
纯HTML/CSS打造中国风纹理
在一个页面上看到的,效果图如下: <div style="width: 100%;"><div style="margin-top: 10px;marg ...
纯CSS打造的Family tree（族谱）
Family tree(族谱),也称家谱,用来记录家族世系繁衍辈份关系.本文结合实例,不借助任何js脚本,使用纯CSS打造一个漂亮的Family tree(族谱),也可以应用的企业组织架构图中. 查看 ...
html图片倒角,CSS实例：纯CSS打造斜角
关于CSS打造斜角,先说一下历史,在CSS+DIV流行以前,也就是用表格作为网页框架的时候,人们通过在一个单元格里加入一个斜角图片来来做这种效果的.这种技术现在已经完全过时了,这里不讨论.CSS+DI ...
html银白色,纯CSS打造银色MacBookAir（二）_html/css_WEB-ITnose
上一篇:<纯CSS打造银色MacBook Air(一)> 写在前面上一篇我们谈了<纯CSS打造银色MacBook Air(一)>,今天我们接着谈. First注:如果图片过大 ...
精致纯CSS打造绿色漂亮导航栏
代码简介: 极精致的纯CSS实现的菜单,兼容性非常好,条例WEB标准,能用性好,用到有修饰图片,请根据代码地址自己下载. 代码内容: <!DOCTYPE html PUBLIC "-/ ...
纯css打造超能陆战队--大白
纯css打造超能陆战队–大白要点思路要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinger ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...

纯html+css打造一款特殊的生日贺卡

纯html+css打造一款特殊的生日贺卡相关推荐

最新文章

热门文章