是不是还没有给心爱的人准备小礼物呀，但是别担心，精心创作了一个“告白气球”网页，按照下面这个教程就可以给Ta做一个创意满满的祝福了呀~(很简单的哦)
作品介绍1.网页作品简介方面 ：一个超具创意的网页 ,喜欢的可以下载，作品支持手机PC响应式布局 (可自定义音乐+文字)
2.网页作品编辑方面：任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)
文章目录
- 为心爱的人做一个超具创意的表白网页吧????(告白气球)HTML+CSS+JavaScript
- 作品介绍
- 一、作品演示
-
- PC端演示
- H5手机端
- 二、代码目录
- 三、代码实现
-
- HTML
- CSS
- JS
- 告白气球(制作教程)
-
- TODO
- config.js 说明
- 四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
- 五、源码获取
- 六、更多表白源码
PC端演示
H5手机端
二、代码目录 三、代码实现HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="static/nigeerhuox16.ico.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>love告白气球</title>
<link rel="stylesheet" href="./static/style.css">
</head>
<body>
<style type="text/css">
.rotateImages{
-webkit-animation:myRotate 10s linear infinite;
animation:myRotate 10s linear infinite;
}
@-webkit-keyframes myRotate{
0%{ -webkit-transform: rotate(0deg);}
50%{ -webkit-transform: rotate(180deg);}
100%{ -webkit-transform: rotate(360deg);}
}
@keyframes myRotate{
0%{ -webkit-transform: rotate(0deg);}
50%{ -webkit-transform: rotate(180deg);}
100%{ -webkit-transform: rotate(360deg);}
}
</style>
<div style="width:100%;max-width:500px;margin:0 auto;position: relative;">
<div class="pass-time">
<p class="finalText"></p>
<p>
<span class="kwy days"></span>
天
<span class="kwy hours"></span>
时
<span class="kwy minutes"></span>
分
<span class="kwy seconds"></span>
秒</p>
</div>
<marquee id="marquee" direction = "up" scrollamount="2" style="color:white; height:100px;line-height: 20px;font-size:12px;text-align: center;">
</marquee>
<div id="pBg1cNNqT-an-obj-2"><img height="180" width="500" src="./static/boy-girl/2000.jpg">
</div>
<div id="pBg1cNNqT-an-obj-3">
<div id="pBg1cNNqT-an-obj-4"><img height="338" width="350"
src="./static/boy-girl/2000(1).jpg"></div>
<div id="pBg1cNNqT-an-obj-5"><img height="113" width="85"
src="./static/boy-girl/2000(2).jpg"></div>
<div id="pBg1cNNqT-an-obj-6"><img height="113" width="85"
src="./static/boy-girl/2000(2).jpg"></div>
<div id="pBg1cNNqT-an-obj-7"><img height="113" width="85"
src="./static/boy-girl/2000(2).jpg"></div>
<div id="pBg1cNNqT-an-obj-8"><img height="113" width="85"
src="./static/boy-girl/2000(2).jpg"></div>
<div id="pBg1cNNqT-an-obj-9"><img height="113" width="85"
src="./static/boy-girl/2000(2).jpg"></div>
<div id="pBg1cNNqT-an-obj-10"><img height="113" width="85"
src="./static/boy-girl/2000(2).jpg"></div>
</div>
<div id="pBg1cNNqT-an-obj-20">
<div id="pBg1cNNqT-an-obj-21"><img height="61" width="135"
src="./static/boy-girl/2000(3).jpg"></div>
<div id="pBg1cNNqT-an-obj-22"><img height="256" width="237"
src="./static/boy-girl/2000(4).jpg"></div>
<div id="pBg1cNNqT-an-obj-23"><img height="159" width="104"
src="./static/boy-girl/2000(5).jpg"></div>
</div>
<div id="pBg1cNNqT-an-obj-24">
<div id="pBg1cNNqT-an-obj-25"><img height="401" width="195"
src="./static/boy-girl/2000(6).jpg"></div>
<div id="pBg1cNNqT-an-obj-26"><img height="290" width="161"
src="./static/boy-girl/2000(7).jpg"></div>
</div>
</div>
<script src="config.js"></script>
<script src="static/index.js"></script>
</body>
</html>CSS
body{
background: #fe909b;
}
.pass-time{
color:white;
font-size:12px;
line-height: 20px;
margin:0 auto;
text-align: center;
}
div#content {
position: relative;
width: 100%;
max-width: 500px;
margin: 0 auto;
height: 800px;
clear: both;
overflow: hidden;
}
#pBg1cNNqT-an-obj-1 {
position: absolute;
-webkit-transform: translate3d(0px, 1px, 0px);
width: 500px;
height: 815px;
top: 0;
left: 0;
}
#pBg1cNNqT-an-obj-2 {
position: absolute;
-webkit-transform: translate3d(0px, 636px, 0px);
width: 500px;
height: 180px;
top: 0;
left: 0;
}
#pBg1cNNqT-an-obj-3 {
position: absolute;
-webkit-transform: translate3d(125px, 330px, 0px);
width: 20px;
height: 20px;
top: 0;
left: 0;
}
#pBg1cNNqT-an-obj-4 {
position: absolute;
-webkit-transform: translate3d(-168px, -108px, 0px);
width: 350px;
height: 338px;
top: 0;
left: 0;
}
#pBg1cNNqT-an-obj-10 {
position: absolute;
-webkit-transform: translate3d(14px, -142px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(26.3deg) scale3d(0.26, 0.26, 1);
width: 85px;
height: 113px;
top: 0;
left: 0;
-webkit-animation: ani-pBg1cNNqT-an-obj-10-0 2.7365s 0.2527s infinite linear both;
}
#pBg1cNNqT-an-obj-11 {
position: absolute;
-webkit-transform: translate3d(108px, 38px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg) scale3d(-0.23999999999999996, 0.26, 1);
width: 85px;
height: 113px;
top: 0;
left: 0;
-webkit-animation: ani-pBg1cNNqT-an-obj-11-0 1.9133s 1.2455s infinite linear both;
}
#pBg1cNNqT-an-obj-12 {
position: absolute;
-webkit-transform: translate3d(102px, -55px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(65.1deg) scale3d(0.17, 0.17, 1);
width: 85px;
height: 113px;
top: 0;
left: 0;
-webkit-animation: ani-pBg1cNNqT-an-obj-12-0 2.1191s 0.1444s infinite linear both;
}
#pBg1cNNqT-an-obj-13 {
position: absolute;
-webkit-transform: translate3d(85px, -105px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(38.2deg) scale3d(-0.23, 0.20653061224489797, 1);
width: 85px;
height: 113px;
top: 0;
left: 0;
-webkit-animation: ani-pBg1cNNqT-an-obj-13-0 1.9061s 0.3574s infinite linear both;
}
#pBg1cNNqT-an-obj-14 {
position: absolute;
-webkit-transform: translate3d(-129px, -120px, 0px) scale3d(-0.21103448275862072, 0.17, 1);
width: 85px;
height: 113px;
top: 0;
left: 0;
-webkit-animation: ani-pBg1cNNqT-an-obj-14-0 1.7437s 1.0036s infinite linear both;
}
#pBg1cNNqT-an-obj-15 {
position: absolute;
-webkit-transform: translate3d(-95px, -139px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(156.4deg) scale3d(-0.25, -0.25, 1);
width: 85px;
height: 113px;
top: 0;
left: 0;
-webkit-animation: ani-pBg1cNNqT-an-obj-15-0 2.4224s 0.4982s infinite linear both;
}
#pBg1cNNqT-an-obj-16 {
position: absolute;
-webkit-transform: translate3d(-24px, -138px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-0.8deg) scale3d(0.32, 0.32, 1);
width: 113px;
height: 113px;
top: 0;
left: 0;
-webkit-animation: ani-pBg1cNNqT-an-obj-16-0 1.4224s 0s infinite linear both;
}
#pBg1cNNqT-an-obj-17 {
position: absolute;
-webkit-transform: translate3d(-62px, -149px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(19.4deg) scale3d(-0.20869565217391306, 0.24, 1);
width: 85px;
height: 113px;
top: 0;
left: 0;
-webkit-animation: ani-pBg1cNNqT-an-obj-17-0 3.7798s 0s infinite linear both;
}
@keyframes ani-pBg1cNNqT-an-obj-5-0 {
0% {
-webkit-transform: translate3d(88px, -66px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(75.6deg) scale3d(-0.20307692307692304, 0.22, 1);
-webkit-animation-timing-function: linear;
opacity: 1;
}
100% {
-webkit-transform: translate3d(203px, -90px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(75.6deg) scale3d(-0.08123076923076922, 0.08800000000000001, 1);
-webkit-animation-timing-function: linear;
opacity: 0;
}
}
@keyframes ani-pBg1cNNqT-an-obj-6-0 {
0% {
-webkit-transform: translate3d(-48px, -137px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(42.9deg) scale3d(0.2, 0.2, 1);
-webkit-animation-timing-function: linear;
}
100% {
-webkit-transform: translate3d(-55px, -281px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(42.9deg) scale3d(0.08000000000000002, 0.08000000000000002, 1);
-webkit-animation-timing-function: linear;
}
}
@keyframes ani-pBg1cNNqT-an-obj-11-0 {
0% {
-webkit-transform: translate3d(108px, 38px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg) scale3d(-0.23999999999999996, 0.26, 1);
-webkit-animation-timing-function: linear;
opacity: 1;
}
100% {
-webkit-transform: translate3d(218px, 7px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg) scale3d(-0.09599999999999999, 0.10400000000000001, 1);
-webkit-animation-timing-function: linear;
opacity: 0;
}
}
@keyframes ani-pBg1cNNqT-an-obj-10-0 {
0% {
-webkit-transform: translate3d(14px, -142px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(26.3deg) scale3d(0.26, 0.26, 1);
-webkit-animation-timing-function: linear;
opacity: 1;
}
100% {
-webkit-transform: translate3d(38px, -268px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(26.3deg) scale3d(0.078, 0.078, 1);
-webkit-animation-timing-function: linear;
opacity: 0;
}
}JS
/*
* @Author: your name
* @Date: 2021-09-07 10:53:28
* @LastEditTime: 2021-09-07 10:56:18
* @LastEditors: your name
* @Description: In User Settings Edit
* @FilePath: \告白气球，飞入我的心扉loveBalloon-master\config.js
*/
// 霸都丶傲天 2019年12月24日
var config = {
// 句子的长度可以任意， 你可以写十句话， 二十句话都可以
// 每句话尽量不要超过15个字,不然展示效果可能不太好
texts: [
"送给我", //这里,每句话结尾的最后一个逗号必须是英文的哦!! 很重要哦!!
"❤心爱的小可爱", // 同上...
"今天是你的生日",
"这是我们在一起的",
"第三个生日了哦",
"去年的生日",
"还记得在王婆串串吃的呢",
"今年要吃好的喽哦",
"要把我家可爱猪猪喂饱饱",
"然后抱走",
"YAMI~~",
],
wish: "小可爱&&大傻子相爱了", //这里,每句话结尾的最后一个逗号必须是英文的哦!! 很重要哦!!
// 时间的格式很重要哦，一定要是下面这个格式!!
// 年年年年-月月-日日 时时:分分:秒秒
time: "2017-07-20 0:0:0", //这里,每句话结尾的最后一个逗号必须是英文的哦!! 很重要哦!!
};告白气球(制作教程)
塞纳河畔，左岸的咖啡。告白气球，飞入我的心扉。
修改config.js的配置就可以为您心爱的人做一个超具创意的网页版告白气球哦, 喜欢的话给个小星星呗~
TODO
- 添加背景音乐
config.js 说明
温馨提示: 每句话那一行，最后都要以英文逗号结尾哦！
背景音乐没有使用告白气球, 而是颜人中的晚安，因为最近很喜欢这首歌。如果替换音乐请替换
static/wanan-yanrenzhong.mp3文件，记住文件名不能替换哦！
var config = {
// 句子的长度可以任意， 你可以写十句话， 二十句话都可以
// 每句话尽量不要超过15个字,不然展示效果可能不太好
texts: [
"送给我", //这里,每句话结尾的最后一个逗号必须是英文的哦!! 很重要哦!!
"心爱的小可爱", // 同上...
"今天是你的生日",
"这是我们在一起的",
"第三个生日了哦",
"去年的生日",
"还记得在王婆串串吃的呢",
"今年要吃好的喽哦",
"要把我家可爱猪猪喂饱饱",
"然后抱走",
"YAMI~~",
],
wish: "小可爱&&大傻子相爱了", //这里,每句话结尾的最后一个逗号必须是英文的哦!! 很重要哦!!
// 时间的格式很重要哦，一定要是下面这个格式!!
// 年年年年-月月-日日 时时:分分:秒秒
time: "2017-07-20 0:0:0", //这里,每句话结尾的最后一个逗号必须是英文的哦!! 很重要哦!!
};四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉3.以上内容技术相关问题可以相互学习，可wx公Z号 ---> web前端小日记 获取更多源码 !
1.❤100款 html+css+JavaScript 表白源码演示地址
2.❤520情人节送女朋友的生日礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
3. 一行代码教你撩妹手到擒来~html+css+js烟花告白3D相册(含音乐+可自定义文字)
4. ❤520给她准备的情人节礼物~html+css+javascript漫天飞雪3D相册(含音乐)
5. ❤520情人节陪她一起看流星雨~html+css+javascript制作流星雨3D相册(含音乐)
6. html+css+js生日快乐网站模板 (520/七夕情人节/告白/求婚/生日快乐) 含背景音乐
7. html+css+js生日快乐~程序员专属的生日快乐html模板(含生日背景音乐)
8. ❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备
9. 我是如何用一行代码表白学妹❤520情人节送女朋友的3D樱花雨相册礼物❤(程序员表白专属)
10. 七夕情人节~html+css+javascript实现满屏爱心特效(程序员表白)
11. 七夕情人节送花告白动画(HTML+CSS+JavaScript)
12. html+css+js制作结婚倒计时网页模板(520/七夕情人节/程序员告白)
13. html+css+javascript制作爱心表白代码(520/七夕情人节/告白/生日礼物)
14. 超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节
15. html+css+javascript实现100款超炫酷告白源码(520/七夕/告白/求婚/脱单)程序员必备
16. html+css+javascript实现520告白爱情树(含音乐)程序员表白必备
17. html+css+javaScript实现炫酷烟花表白(云雾状粒子文字3D开场)
18. 程序员520告白Html+Js+Css花瓣相册网页模板❤程序员表白必备
19. html+css+javascript实现乾坤八卦风水罗盘时钟 (免费附源码)
20. html+css+javascript实现抖音超火罗盘时钟 (免费附源码)
21. 抖音超火JavaScript实现网红太空人表盘 ~看程序员是如何用代码做华为太空手表
22. html+css+js绘制冬季下雪3D相册(520情人节/七夕情人节/程序员表白html代码)
23. 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)
24. html+css+js制作520表白网页，全屏的爱心和表白语网页动画代码，浪漫的520爱心表白动画特效。
25. 520情人节程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)
26. Html5浪漫结婚请柬婚礼网站模板❤_爱她就给她最美的H5婚礼请柬_(婚庆电子邀请函)含背景音乐
27. html+css+javascript满屏雪花爱心520表白网站 (含音乐)520告白/七夕情人节/生日礼物/程序员表白必备
28. 520七夕情人节代码给女朋友送了一个礼物~html+css+javascript实现樱花爱心相册「可以拿去送给自己喜欢的人」
29. 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
30. html+css+javascript生日快乐烟花 ❤520/表白/七夕情人节/求婚❤专用(自定义文字)
31.一行代码教你七夕情人节如何告白—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
32.HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)
33.送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript)
34.HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤
35.《520七夕情人节表白礼物》：虚幻浪漫的爱情故事——❤520表白星空漫漫3D相册❤(HTML+CSS+JavaScript)
36.HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)
37.《520七夕情人节表白》：制作属于我们的爱情相册网页(HTML+CSS+JavaScript)
38.师妹直呼“这也太哇塞了吧“ ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)
39.❤七夕情人节将至，用HTML+CSS给女朋友绘制一张彩色代码相册吧!
40.❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript
41.HTML5+CSS3实现非常有创意的生日蛋糕动画(含音乐)
42.HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的)
43.最近分享一款抖音上很火的七夕节程序员表白页面_html5七夕表白放烟花动画特效
44.❤生日快乐网站模板HTML❤(精品制作)(HTML5+CSS3+JS)
更多推荐
为心爱的人做一个超具创意的表白网页吧❤(告白气球)HTML+CSS+JavaScript
发布评论