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

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

作品介绍

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

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


文章目录

一、作品演示

​❤100款 html+css+JavaScript 表白源码演示地址​

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

二、代码目录

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

三、代码实现

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>

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;
}

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",
}
};

四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

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