HTML+CSS+JavaScript 超具创意的网页生日快乐祝福网页模板_生日蜡烛实现前端

作者：羊村懒王 | 2024-02-15 15:09:39

踩

生日蜡烛实现前端

HTML+CSS+JavaScript 超具创意的网页生日快乐祝福网页模板

是不是还没有给心爱的人准备小礼物呀，但是别担心，精心创作了一个“飘动爱心3D相册”网页，按照下面这个教程就可以给Ta做一个创意满满的祝福了呀~（很简单的哦）

作品介绍

1.网页作品简介方面 ：一个超具创意的网页 ,喜欢的可以下载，作品支持手机PC响应式布局 (可自定义12张相片和音乐)

2.网页作品编辑方面：任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

一、作品演示

❤100款 html+css+JavaScript 表白源码演示地址
在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现

HTML

<head>
    <title>Happy Birthday</title>
    <meta charset="UTF-8"/>
    <meta name="description" content="Happy Birthday">
    <meta name="robots" content="index, follow"/>
    <link rel="author" href="https://plus.google.com/u/1/+AyushSharma1/"/>
    <meta name="keywords" content="Birthday, Happy">
    <script src="assets/less.min.js"></script>
    <script src="config.js"></script>
</head>

<body>
<div class="loading"></div>
<audio class="song" controls loop>
    <source src="assets/hbd.mp3"></source>
    Your browser isn't invited for super fun audio time.
</audio>
<div class="balloons text-center" id="b1">
    <h2 style="color:#F2B300;"></h2>
</div>

<img src="assets/Balloon-Border.png" width="100%" class="balloon-border">


<div class="container">

    <div class="row">
        <div class="col-md-2 col-xs-2 bulb-holder">
            <div class="bulb" id="bulb_yellow"></div>
        </div>
        <div class="col-md-2 col-xs-2 bulb-holder">
            <div class="bulb" id="bulb_red"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center">
            <img src="assets/banner.png" class="bannar">
        </div>
    </div>
    <!-- <div class="row message">
        <div class="col-md-12"><p>Khushbu</p></div>
    </div> -->
    <div class="row cake-cover">
        <div class="col-md-12 texr-center">
            <div class="cake">
                <div class="velas">
                    <div class="fuego"></div>
                    <div class="fuego"></div>
                    <div class="fuego"></div>
                    <div class="fuego"></div>
                    <div class="fuego"></div>
                </div>
                <div class="cobertura"></div>
                <div class="bizcocho"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

CSS

body {
	/*background-color: #FFDAB9;	*/
	background-color: #000;
	-webkit-transition:background-color linear 5s;
	-moz-transition:background-color linear 5s;
	-o-transition:background-color linear 5s;
	-ms-transition:background-color linear 5s;
	transition:background-color linear 5s;
	overflow-x:hidden;
}
.container {
	display: none;
}
.peach {
	background-color: #FFDAB9;

}
.peach-after {
	-webkit-animation:peach_alive linear 8s infinite;
	-moz-animation:peach_alive linear 8s infinite;
	-o-animation:peach_alive linear 8s infinite;
	-ms-animation:peach_alive linear 8s infinite;
	animation:peach_alive linear 8s infinite;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

JS

// 霸都丶傲天 2019年10月10日 https://github.com/AJLoveChina/birthday
var config = {
    // 句子的长度可以任意， 你可以写十句话， 二十句话都可以
    // 每句话尽量不要超过15个字,不然展示效果可能不太好
    texts: [
        "送给我",      //这里,每句话结尾的最后一个逗号必须是英文的哦!! 很重要哦!!
        "心爱的小可爱",  // 同上...
        "今天是你的生日",
        "这是我们在一起的",
        "第三个生日了哦",
        "去年的生日",
        "还记得在王婆串串吃的呢",
        "今年要吃好的喽哦",
        "要把我家可爱猪猪喂饱饱",
        "然后抱走",
        "YAMI~~",
    ],
    /**
     * imgs 可以不填, 但是如果要填写的话必须遵循下面的格式
     * "对应上面的文字, 要完全一样" : "图片地址, 可以把图片放在imgs文件夹中"
     * 例如
     * "心爱的小可爱": "./imgs/xiaokeai.jpg"
     *
     * 如果不要图片的话, 直接在每行开头写两个斜杠注释即可, 例如下面的 "今天是你的生日" 的图片就不会展示了:)
     * Tip: 图片最好用正方形or接近正方形, 看起来效果更好
     */
    imgs: {
        "心爱的小可爱": "./imgs/xiaokeai.png",
        // "今天是你的生日": "./imgs/birthday.jpg",
    },
    // 按钮文字描述, 以下是默认的按钮文字，英文的，您可以改成你喜欢的文字
    desc: {
        turn_on: "开始",
        play: "音乐",
        bannar_coming: "颜色",
        balloons_flying: "好像少点东西",
        cake_fadein: "蛋糕？",
        light_candle: "蜡烛？",
        wish_message: "生日快乐",
        story: "A MESSAGE FOR YOU",
    }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43