[JavaScript知识库] 纯html+css打造一款特殊的生日贺卡

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁
-> JavaScript知识库 -> 纯html+css打造一款特殊的生日贺卡 -> 正文阅读
[JavaScript知识库]纯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>
JavaScript知识库最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线（Vue中运用 AntVG6）
Vue事件处理的基本使用
Vue后台项目的记录（一）
前后端分离vue跨域，devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
加:2022-06-16 21:35:35 更:2022-06-16 21:38:09
360图书馆购物三丰科技阅读网日历万年历 2024年11日历
-2024/11/23 17:06:22-
图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
网站联系: qq:121756557 email:121756557@qq.com IT数码