为心爱的人做一个超具创意的表白网页吧????(告白气球)HTML+CSS+JavaScript

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

作品介绍

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

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

文章目录

  • 为心爱的人做一个超具创意的表白网页吧????(告白气球)HTML+CSS+JavaScript
  • 作品介绍
  • 一、作品演示
    • PC端演示
    • H5手机端
  • 二、代码目录
  • 三、代码实现
    • HTML
    • CSS
    • JS
    • 告白气球(制作教程)
      • TODO
      • config.js 说明
  • 四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
  • 五、源码获取
  • 六、更多表白源码

PC端演示

为心爱的人做一个超具创意的表白网页吧❤(告白气球)HTML+CSS+JavaScript_javascript

H5手机端

为心爱的人做一个超具创意的表白网页吧❤(告白气球)HTML+CSS+JavaScript_javascript_02

二、代码目录

为心爱的人做一个超具创意的表白网页吧❤(告白气球)HTML+CSS+JavaScript_表白网页制作HTML_03

三、代码实现

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <link rel="shortcut icon" href="static/nigeerhuox16.ico.jpg">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  8.     <title>love告白气球</title>
  9.     <link rel="stylesheet" href="./static/style.css">
  10. </head>
  11. <body>
  12. <style type="text/css">
  13.     .rotateImages{
  14.         -webkit-animation:myRotate 10s linear infinite;
  15.         animation:myRotate 10s linear infinite;
  16.     }
  17.     @-webkit-keyframes myRotate{
  18.         0%{ -webkit-transform: rotate(0deg);}
  19.         50%{ -webkit-transform: rotate(180deg);}
  20.         100%{ -webkit-transform: rotate(360deg);}
  21.     }
  22.     @keyframes myRotate{
  23.         0%{ -webkit-transform: rotate(0deg);}
  24.         50%{ -webkit-transform: rotate(180deg);}
  25.         100%{ -webkit-transform: rotate(360deg);}
  26.     }
  27. </style>
  28.  
  29. <div style="width:100%;max-width:500px;margin:0 auto;position: relative;">
  30.     <div class="pass-time">
  31.         <p class="finalText"></p>
  32.         <p>
  33.             <span class="kwy days"></span>
  34.             天
  35.             <span class="kwy hours"></span>
  36.             时
  37.             <span class="kwy minutes"></span>
  38.             分
  39.             <span class="kwy seconds"></span>
  40.             秒</p>
  41.     </div>
  42.  
  43.     <marquee id="marquee" direction = "up" scrollamount="2" style="color:white; height:100px;line-height: 20px;font-size:12px;text-align: center;">
  44.  
  45.     </marquee>
  46.  
  47.  
  48.     <div id="pBg1cNNqT-an-obj-2"><img height="180" width="500" src="./static/boy-girl/2000.jpg">
  49.     </div>
  50.     <div id="pBg1cNNqT-an-obj-3">
  51.         <div id="pBg1cNNqT-an-obj-4"><img height="338" width="350"
  52.                                           src="./static/boy-girl/2000(1).jpg"></div>
  53.         <div id="pBg1cNNqT-an-obj-5"><img height="113" width="85"
  54.                                           src="./static/boy-girl/2000(2).jpg"></div>
  55.         <div id="pBg1cNNqT-an-obj-6"><img height="113" width="85"
  56.                                           src="./static/boy-girl/2000(2).jpg"></div>
  57.         <div id="pBg1cNNqT-an-obj-7"><img height="113" width="85"
  58.                                           src="./static/boy-girl/2000(2).jpg"></div>
  59.         <div id="pBg1cNNqT-an-obj-8"><img height="113" width="85"
  60.                                           src="./static/boy-girl/2000(2).jpg"></div>
  61.         <div id="pBg1cNNqT-an-obj-9"><img height="113" width="85"
  62.                                           src="./static/boy-girl/2000(2).jpg"></div>
  63.         <div id="pBg1cNNqT-an-obj-10"><img height="113" width="85"
  64.                                            src="./static/boy-girl/2000(2).jpg"></div>
  65.     </div>
  66.     <div id="pBg1cNNqT-an-obj-20">
  67.         <div id="pBg1cNNqT-an-obj-21"><img height="61" width="135"
  68.                                            src="./static/boy-girl/2000(3).jpg"></div>
  69.         <div id="pBg1cNNqT-an-obj-22"><img height="256" width="237"
  70.                                            src="./static/boy-girl/2000(4).jpg"></div>
  71.         <div id="pBg1cNNqT-an-obj-23"><img height="159" width="104"
  72.                                            src="./static/boy-girl/2000(5).jpg"></div>
  73.     </div>
  74.     <div id="pBg1cNNqT-an-obj-24">
  75.         <div id="pBg1cNNqT-an-obj-25"><img height="401" width="195"
  76.                                            src="./static/boy-girl/2000(6).jpg"></div>
  77.         <div id="pBg1cNNqT-an-obj-26"><img height="290" width="161"
  78.                                            src="./static/boy-girl/2000(7).jpg"></div>
  79.     </div>
  80.  
  81. </div>
  82.  
  83.  
  84. <script src="config.js"></script>
  85. <script src="static/index.js"></script>
  86. </body>
  87. </html>

CSS

  1. body{
  2.     background: #fe909b;
  3. }
  4. .pass-time{
  5.     color:white;
  6.     font-size:12px;
  7.     line-height: 20px;
  8.     margin:0 auto;
  9.     text-align: center;
  10. }
  11.  
  12. div#content {
  13.     position: relative;
  14.     width: 100%;
  15.     max-width: 500px;
  16.     margin: 0 auto;
  17.     height: 800px;
  18.     clear: both;
  19.     overflow: hidden;
  20. }
  21.  
  22.  
  23. #pBg1cNNqT-an-obj-1 {
  24.     position: absolute;
  25.     -webkit-transform: translate3d(0px, 1px, 0px);
  26.     width: 500px;
  27.     height: 815px;
  28.     top: 0;
  29.     left: 0;
  30. }
  31.  
  32. #pBg1cNNqT-an-obj-2 {
  33.     position: absolute;
  34.     -webkit-transform: translate3d(0px, 636px, 0px);
  35.     width: 500px;
  36.     height: 180px;
  37.     top: 0;
  38.     left: 0;
  39. }
  40.  
  41. #pBg1cNNqT-an-obj-3 {
  42.     position: absolute;
  43.     -webkit-transform: translate3d(125px, 330px, 0px);
  44.     width: 20px;
  45.     height: 20px;
  46.     top: 0;
  47.     left: 0;
  48. }
  49.  
  50. #pBg1cNNqT-an-obj-4 {
  51.     position: absolute;
  52.     -webkit-transform: translate3d(-168px, -108px, 0px);
  53.     width: 350px;
  54.     height: 338px;
  55.     top: 0;
  56.     left: 0;
  57. }
  58.  
  59.  
  60.  
  61. #pBg1cNNqT-an-obj-10 {
  62.     position: absolute;
  63.     -webkit-transform: translate3d(14px, -142px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(26.3deg) scale3d(0.26, 0.26, 1);
  64.     width: 85px;
  65.     height: 113px;
  66.     top: 0;
  67.     left: 0;
  68.     -webkit-animation: ani-pBg1cNNqT-an-obj-10-0 2.7365s 0.2527s infinite linear both;
  69. }
  70.  
  71.  
  72. #pBg1cNNqT-an-obj-11 {
  73.     position: absolute;
  74.     -webkit-transform: translate3d(108px, 38px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg) scale3d(-0.23999999999999996, 0.26, 1);
  75.     width: 85px;
  76.     height: 113px;
  77.     top: 0;
  78.     left: 0;
  79.     -webkit-animation: ani-pBg1cNNqT-an-obj-11-0 1.9133s 1.2455s infinite linear both;
  80. }
  81.  
  82.  
  83. #pBg1cNNqT-an-obj-12 {
  84.     position: absolute;
  85.     -webkit-transform: translate3d(102px, -55px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(65.1deg) scale3d(0.17, 0.17, 1);
  86.     width: 85px;
  87.     height: 113px;
  88.     top: 0;
  89.     left: 0;
  90.     -webkit-animation: ani-pBg1cNNqT-an-obj-12-0 2.1191s 0.1444s infinite linear both;
  91. }
  92.  
  93.  
  94. #pBg1cNNqT-an-obj-13 {
  95.     position: absolute;
  96.     -webkit-transform: translate3d(85px, -105px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(38.2deg) scale3d(-0.23, 0.20653061224489797, 1);
  97.     width: 85px;
  98.     height: 113px;
  99.     top: 0;
  100.     left: 0;
  101.     -webkit-animation: ani-pBg1cNNqT-an-obj-13-0 1.9061s 0.3574s infinite linear both;
  102. }
  103.  
  104.  
  105. #pBg1cNNqT-an-obj-14 {
  106.     position: absolute;
  107.     -webkit-transform: translate3d(-129px, -120px, 0px) scale3d(-0.21103448275862072, 0.17, 1);
  108.     width: 85px;
  109.     height: 113px;
  110.     top: 0;
  111.     left: 0;
  112.     -webkit-animation: ani-pBg1cNNqT-an-obj-14-0 1.7437s 1.0036s infinite linear both;
  113. }
  114.  
  115. #pBg1cNNqT-an-obj-15 {
  116.     position: absolute;
  117.     -webkit-transform: translate3d(-95px, -139px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(156.4deg) scale3d(-0.25, -0.25, 1);
  118.     width: 85px;
  119.     height: 113px;
  120.     top: 0;
  121.     left: 0;
  122.     -webkit-animation: ani-pBg1cNNqT-an-obj-15-0 2.4224s 0.4982s infinite linear both;
  123. }
  124.  
  125.  
  126. #pBg1cNNqT-an-obj-16 {
  127.     position: absolute;
  128.     -webkit-transform: translate3d(-24px, -138px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-0.8deg) scale3d(0.32, 0.32, 1);
  129.     width: 113px;
  130.     height: 113px;
  131.     top: 0;
  132.     left: 0;
  133.     -webkit-animation: ani-pBg1cNNqT-an-obj-16-0 1.4224s 0s infinite linear both;
  134. }
  135.  
  136. #pBg1cNNqT-an-obj-17 {
  137.     position: absolute;
  138.     -webkit-transform: translate3d(-62px, -149px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(19.4deg) scale3d(-0.20869565217391306, 0.24, 1);
  139.     width: 85px;
  140.     height: 113px;
  141.     top: 0;
  142.     left: 0;
  143.     -webkit-animation: ani-pBg1cNNqT-an-obj-17-0 3.7798s 0s infinite linear both;
  144. }
  145.  
  146.  
  147. @keyframes ani-pBg1cNNqT-an-obj-5-0 {
  148.     0% {
  149.         -webkit-transform: translate3d(88px, -66px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(75.6deg) scale3d(-0.20307692307692304, 0.22, 1);
  150.         -webkit-animation-timing-function: linear;
  151.         opacity: 1;
  152.     }
  153.     100% {
  154.         -webkit-transform: translate3d(203px, -90px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(75.6deg) scale3d(-0.08123076923076922, 0.08800000000000001, 1);
  155.         -webkit-animation-timing-function: linear;
  156.         opacity: 0;
  157.     }
  158. }
  159.  
  160.  
  161. @keyframes ani-pBg1cNNqT-an-obj-6-0 {
  162.     0% {
  163.         -webkit-transform: translate3d(-48px, -137px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(42.9deg) scale3d(0.2, 0.2, 1);
  164.         -webkit-animation-timing-function: linear;
  165.     }
  166.     100% {
  167.         -webkit-transform: translate3d(-55px, -281px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(42.9deg) scale3d(0.08000000000000002, 0.08000000000000002, 1);
  168.         -webkit-animation-timing-function: linear;
  169.     }
  170. }
  171.  
  172.  
  173. @keyframes ani-pBg1cNNqT-an-obj-11-0 {
  174.     0% {
  175.         -webkit-transform: translate3d(108px, 38px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg) scale3d(-0.23999999999999996, 0.26, 1);
  176.         -webkit-animation-timing-function: linear;
  177.         opacity: 1;
  178.     }
  179.     100% {
  180.         -webkit-transform: translate3d(218px, 7px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg) scale3d(-0.09599999999999999, 0.10400000000000001, 1);
  181.         -webkit-animation-timing-function: linear;
  182.         opacity: 0;
  183.     }
  184. }
  185.  
  186.  
  187. @keyframes ani-pBg1cNNqT-an-obj-10-0 {
  188.     0% {
  189.         -webkit-transform: translate3d(14px, -142px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(26.3deg) scale3d(0.26, 0.26, 1);
  190.         -webkit-animation-timing-function: linear;
  191.         opacity: 1;
  192.     }
  193.     100% {
  194.         -webkit-transform: translate3d(38px, -268px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(26.3deg) scale3d(0.078, 0.078, 1);
  195.         -webkit-animation-timing-function: linear;
  196.         opacity: 0;
  197.     }
  198. }

JS

  1. /*
  2.  * @Author: your name
  3.  * @Date: 2021-09-07 10:53:28
  4.  * @LastEditTime: 2021-09-07 10:56:18
  5.  * @LastEditors: your name
  6.  * @Description: In User Settings Edit
  7.  * @FilePath: \告白气球，飞入我的心扉loveBalloon-master\config.js
  8.  */
  9. // 霸都丶傲天 2019年12月24日
  10.  
  11. var config = {
  12.     // 句子的长度可以任意， 你可以写十句话， 二十句话都可以
  13.     // 每句话尽量不要超过15个字,不然展示效果可能不太好
  14.     texts: [
  15.         "送给我",      //这里,每句话结尾的最后一个逗号必须是英文的哦!! 很重要哦!!
  16.         "❤心爱的小可爱",  // 同上...
  17.         "今天是你的生日",
  18.         "这是我们在一起的",
  19.         "第三个生日了哦",
  20.         "去年的生日",
  21.         "还记得在王婆串串吃的呢",
  22.         "今年要吃好的喽哦",
  23.         "要把我家可爱猪猪喂饱饱",
  24.         "然后抱走",
  25.         "YAMI~~",
  26.     ],
  27.     wish: "小可爱&&大傻子相爱了",  //这里,每句话结尾的最后一个逗号必须是英文的哦!! 很重要哦!!
  28.     // 时间的格式很重要哦，一定要是下面这个格式!!
  29.     // 年年年年-月月-日日 时时:分分:秒秒
  30.     time: "2017-07-20 0:0:0",    //这里,每句话结尾的最后一个逗号必须是英文的哦!! 很重要哦!!
  31. };

告白气球(制作教程)

塞纳河畔，左岸的咖啡。告白气球，飞入我的心扉。

修改config.js的配置就可以为您心爱的人做一个超具创意的网页版告白气球哦, 喜欢的话给个小星星呗~

TODO

  • 添加背景音乐

config.js 说明

温馨提示: 每句话那一行，最后都要以英文逗号结尾哦！

背景音乐没有使用告白气球, 而是颜人中的晚安，因为最近很喜欢这首歌。如果替换音乐请替换 static/wanan-yanrenzhong.mp3文件，记住文件名不能替换哦！

  1. var config = {
  2.     // 句子的长度可以任意， 你可以写十句话， 二十句话都可以
  3.     // 每句话尽量不要超过15个字,不然展示效果可能不太好
  4.     texts: [
  5.         "送给我",      //这里,每句话结尾的最后一个逗号必须是英文的哦!! 很重要哦!!
  6.         "心爱的小可爱",  // 同上...
  7.         "今天是你的生日",
  8.         "这是我们在一起的",
  9.         "第三个生日了哦",
  10.         "去年的生日",
  11.         "还记得在王婆串串吃的呢",
  12.         "今年要吃好的喽哦",
  13.         "要把我家可爱猪猪喂饱饱",
  14.         "然后抱走",
  15.         "YAMI~~",
  16.     ],
  17.     wish: "小可爱&&大傻子相爱了",  //这里,每句话结尾的最后一个逗号必须是英文的哦!! 很重要哦!!
  18.     // 时间的格式很重要哦，一定要是下面这个格式!!
  19.     // 年年年年-月月-日日 时时:分分:秒秒
  20.     time: "2017-07-20 0:0:0",    //这里,每句话结尾的最后一个逗号必须是英文的哦!! 很重要哦!!
  21. };
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站为心爱的人做一个超具创意的表白网页吧❤(告白气球)HTML+CSS+JavaScript_javascript_04

五、源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

❉3.以上内容技术相关问题可以相互学习，可wx公Z号 ---> web前端小日记 获取更多源码 !为心爱的人做一个超具创意的表白网页吧❤(告白气球)HTML+CSS+JavaScript_css_05

六、更多表白源码

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)