0
0

【博主推荐】HTML浪漫表白求爱(附源码)

HTML浪漫表白求爱

【博主推荐】HTML浪漫表白求爱(附源码)，内含六款浪漫的表白源码，可用于520，情人节，生日，求爱场景，下载直接使用。

带花询问表白HTML源码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>执子之手，与子偕老</title>
  6.   <meta name="language" content="zh-CN">
  7.   <link type="text/css" rel="stylesheet" href="css/theme.css" />
  8.   <script src="js/jquery-2.0.3.min.js"></script>
  9.   <style type="text/css">
  10.     body {
  11.         font-family:STSong,华文宋体;
  12.         color:orange;
  13.     }
  14.   </style>
  15. </head>
  16. <body>
  17.   <div id="div_container">
  18.     <div id="div_start_bg"></div>
  19.     <div id="div_onlyyou">
  20.       <div id="div_oy_inner">
  21.         <div class="div_oy_text">
  22.           <h1></h1>
  23.           <img class="img_oy_text" src="" />
  24.           <p class="p_oy_text"></p>
  25.           <div></div>
  26.           <ul id="ul_oy_benefit">
  27.             <li class="li_oy_benefit"></li>
  28.             <li class="li_oy_benefit"></li>
  29.             <li class="li_oy_benefit"></li>
  30.             <li class="li_oy_benefit"></li>
  31.             <li class="li_oy_benefit"></li>
  32.             <li class="li_oy_benefit"></li>
  33.             <li class="li_oy_benefit"></li>
  34.             <li class="li_oy_benefit"></li>
  35.             <li class="li_oy_benefit"></li>
  36.             <li class="li_oy_benefit"></li>
  37.             <li class="li_oy_benefit"></li>
  38.             <li class="li_oy_benefit"></li>
  39.             <li class="li_oy_benefit"></li>
  40.             <li class="li_oy_benefit"></li>
  41.             <li class="li_oy_benefit"></li>
  42.             <li class="li_oy_benefit"></li>
  43.             <li class="li_oy_benefit"></li>
  44.             <li class="li_oy_benefit"></li>
  45.             <li class="li_oy_benefit"></li>
  46.             <li class="li_oy_benefit"></li>
  47.           </ul>
  48.         </div>
  49.         <ul id="ul_oy_btn">
  51.           <li onclick="oy_go_next()">Yes&nbsp;&nbsp;❤</li>
  52.           <li onclick="oy_show_benefit()">No&nbsp;&nbsp;✖</li>
  53.         </ul>
  54.         <div id="div_oy_note" onclick="oy_hide_note()">
  55.           <img src="images/emoji_kelian.jpg" alt="" /><br />给我想要的Yes！
  56.           <div id="div_oy_note_close">✖</div>
  57.         </div>
  58.         <div id="div_oy_yes">
  59.           <img src="images/emoji_bixin.jpg" alt="" /><br />太好了！哈哈~
  60.         </div>
  61.       </div>
  62.     </div>
  63.     <div class="div_pure_words">
  64.       <div class="div_pure_words_bg">
  65.         <div class="div_pure_words_height"></div>
  66.       </div>
  67.       <div class="div_pw_typed">
  68.         <span id="span_pw_typed"></span>
  69.       </div>
  70.     </div>
  71.     <div id="div_btn_container">
  72.       <div id="div_btn_inner">
  73.         <div class="div_music_tips"></div>
  74.         <div class="div_btn" id="div_music" onclick="music_switch()">
  75.           <img id="img_music" src="images/music_note_big.png"
  76.             style="-webkit-animation: music_play_rotate 1s linear infinite;" />
  77.           <audio id="audio_music" autoplay="autoplay" loop="loop">
  78.             <source type="audio/mpeg" />
  79.           </audio>
  80.         </div>
  81.         <div class="div_record_tips"></div>
  82.         <div class="div_btn" id="div_record" onclick="record_switch()">
  83.           <audio id="audio_record" loop="loop">
  84.             <source type="audio/mpeg" />
  85.           </audio>
  86.         </div>
  87.       </div>
  88.     </div>
  89.   </div>
  90. </body>
  91. </html>

带花询问表白HTML效果展示

1.支持切换音乐
2.支持改变文字和样式，修改图片
3.界面都是动态效果，图片静态看不出效果

在这里插入图片描述

爱心花环表白HTML源码

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.     <title>执子之手，与子偕老</title>
  6.     <meta name="language" content="zh-CN">
  7.     <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
  8.     <link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="screen">
  9.     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  10.     <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
  11.     <link href="css/prettyPhoto.css" rel="stylesheet" />
  12.     <script type="text/javascript" src="js/jquery.min.js"></script>
  13.     <script type="text/javascript" src="js/content_switch.js"></script>
  14.     <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  15.     <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
  16.     <script type="text/javascript" src="js/jquery-ui.js"></script>
  17.     <script type="text/javascript" src="js/cScroll.js"></script>
  18.     <script src="js/jquery.cycle.all.latest.js" type="text/javascript"></script>
  19.     <script src="js/jquery.color.js" type="text/javascript"></script>
  20.     <script type="text/javascript" src="js/script.js"></script>
  21.     <script type="text/javascript" src="js/functions.js"></script>
  22.     <script src="js/prettyPhoto.js"></script>
  23. <body onpaste="return false" ondragstart="return false" onmouseover="window.status='';return true"
  24.     oncopy="return false;">
  25.     <frameset>
  26.         <frame src="index.html">
  27.     </frameset>
  28.     <script>
  29.         function stop() {
  30.             alert('白风夕，愿得一人心，白首不分离！');
  31.             return false;
  32.         }
  33.         document.oncontextmenu = stop; 
  34.     </script>
  36.     <body onselectstart="return false" onpaste="return false" oncopy="return false;" oncut="return false;">
  37.         </a>
  38.         <script>
  40.             function checkhtml5() {
  41.                 if ($.browser.msie && parseInt($.browser.version, 10) < 9) {
  42.                     document.body.innerHTML = "<div style=' clear: both; text-align:center; position: relative; height: 50px; margin-top: 30px; padding: 20px; background-color: red; color: white; font-size:20px;'>你的浏览器非常落后，不支持 HTML5!<br/>请使用 Chrome 14+/IE 9+/Firefox 7+/Safari 4+ 其中任意一款浏览器访问此页面。</a></div>";
  44.                 }
  45.             }
  46.         </script>
  47.         <style>
  48.         body {
  49.             font-family:STSong,华文宋体;
  50.         }
  51.             a.wb_sina {
  52.                 float: left;
  53.                 margin-top: 20px;
  54.                 margin-left: 15px;
  55.                 display: inline-block;
  56.                 padding: 4px 10px;
  57.                 border-radius: 3px;
  58.                 background-color: #e55345;
  59.                 background-image: -moz-linear-gradient(top, #e96249, #e03c40);
  60.                 background-image: -ms-linear-gradient(top, #e96249, #e03c40);
  61.                 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e96249), to(#e03c40));
  62.                 background-image: -webkit-linear-gradient(top, #e96249, #e03c40);
  63.                 background-image: -o-linear-gradient(top, #e96249, #e03c40);
  64.                 background-image: linear-gradient(top, #e96249, #e03c40);
  65.                 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e96249', endColorstr='#e03c40', GradientType=0);
  66.                 background-repeat: repeat-x;
  67.                 text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
  68.                 border: 1px solid #cf2b28;
  69.                 color: #fff !important;
  70.                 box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 1px 0 rgba(0, 0, 0, .2);
  71.             }
  72.             a.wb_sina:hover {
  73.                 background-image: -moz-linear-gradient(top, #e03c40, #e96249);
  74.                 background-image: -ms-linear-gradient(top, #e03c40, #e96249);
  75.                 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e03c40), to(#e96249));
  76.                 background-image: -webkit-linear-gradient(top, #e03c40, #e96249);
  77.                 background-image: -o-linear-gradient(top, #e03c40, #e96249);
  78.                 background-image: linear-gradient(top, #e03c40, #e96249);
  79.                 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e03c40', endColorstr='#e96249', GradientType=0);
  80.             }
  82.             a.wb_sina span {
  83.                 display: inline-block;
  84.                 vertical-align: -5px;
  85.                 margin-right: 7px;
  86.                 height: 20px;
  87.                 width: 24px;
  88.                 background: url(./images/weibo.png) no-repeat;
  89.             }
  91.             a.wb_tencent {
  92.                 float: left;
  93.                 margin-top: 20px;
  94.                 margin-left: 15px;
  95.                 display: inline-block;
  96.                 padding: 4px 10px;
  97.                 border-radius: 3px;
  98.                 background-color: #0e7fcc;
  99.                 background-image: -moz-linear-gradient(top, #1288d4, #0771c1);
  100.                 background-image: -ms-linear-gradient(top, #1288d4, #0771c1);
  101.                 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1288d4), to(#0771c1));
  102.                 background-image: -webkit-linear-gradient(top, #1288d4, #0771c1);
  103.                 background-image: -o-linear-gradient(top, #1288d4, #0771c1);
  104.                 background-image: linear-gradient(top, #1288d4, #0771c1);
  105.                 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1288d4', endColorstr='#0771c1', GradientType=0);
  106.                 background-repeat: repeat-x;
  107.                 text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
  108.                 border: 1px solid #0D6EB8;
  109.                 color: #fff !important;
  110.                 box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 1px 0 rgba(0, 0, 0, .2);
  111.             }
  113.             a.wb_tencent:hover {
  114.                 background-color: #0e7fcc;
  115.                 background-image: -moz-linear-gradient(top, #0771c1, #1288d4);
  116.                 background-image: -ms-linear-gradient(top, #0771c1, #1288d4);
  117.                 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0771c1), to(#1288d4));
  118.                 background-image: -webkit-linear-gradient(top, #0771c1, #1288d4);
  119.                 background-image: -o-linear-gradient(top, #0771c1, #1288d4);
  120.                 background-image: linear-gradient(top, #0771c1, #1288d4);
  121.                 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0771c1', endColorstr='#1288d4', GradientType=0);
  122.             }
  124.             a.wb_tencent span {
  125.                 display: inline-block;
  126.                 vertical-align: -5px;
  127.                 margin-right: 7px;
  128.                 height: 20px;
  129.                 width: 24px;
  130.                 background: url(./images/weibo.png) no-repeat 0 -20px;
  131.             }
  132.             #abox {
  133.                 position: fixed;
  134.                 _position: absolute;
  135.                 right: 15px;
  136.                 z-index: 99999999;
  137.             }
  138.         </style>
  139.         </head>
  141.         <body onLoad="checkhtml5()">
  142.             <div id="abox">
  143.             </div>
  144.             <div class="page_spinner">
  145.                 <div></div>
  146.             </div>
  147.             <div class="over">
  148.                 <div class="centre">
  149.                     <div class="main">
  150.                         <!--header -->
  151.                         <header>
  152.                             <h1><span id="logo"><img src="images/logo1.png" alt="" usemap="#logo"></span></h1>
  153.                             <nav class="menu">
  154.                                 <ul id="menu">
  155.                                     <li id="nav1"><img src="images/nav1.png" alt=""><span>爱的宣誓</span></li>
  156.                                     <li id="nav2"><img src="images/nav2.png" alt=""><span>恋爱历程</span> </li>
  157.                                     <li id="nav3"><img src="images/nav3.png" alt=""><span>絮叨絮叨</span></li>
  158.                                     <li id="nav4"><img src="images/nav4.png" alt=""><span>且试天下</span></li>
  159.                                     <li id="nav5"><img src="images/nav5.png" alt=""><span>爱的感受</span></li>
  160.                                     <li id="nav6"><img src="images/nav6.png" alt=""><span>执子之手</span></li>
  161.                                 </ul>
  162.                             </nav>
  163.                             <img src="images/spacer.gif" alt="" id="navigation" usemap="#navigation">
  164.                             <map name="navigation" class="navigation">
  165.                             </map>
  166.                             <map name="logo" class="map_logo"></map>
  167.                         </header>
  168.                         <!--header end-->
  169.                         <!--content -->
  170.                         <map name="back" class="map_back"></map>
  171.                         <article id="content">
  172.                             <ul>
  173.                                 <li id="page_Home">
  174.                                     <img src="images/bg_content.png" alt="" class="bg_cont">
  175.                                     <span class="back"><img src="images/nav1.png" alt="" usemap="#back"><a
  176.                                             href="index.html#close">返回</a></span>
  177.                                     <div class="pad">
  178.                                         <h2>爱的宣誓</h2>
  179.                                         黑丰息 &amp; 白风夕<br />
  180.                                         愿得一人心，白首不分离。<br />
  181.                                         愉悦其实真的狠简单,有你有事做,有所期盼！<br />
  182.                                         初恋像柠檬,虽酸却耐人寻味；<br />
  183.                                         热恋像火焰,虽热却不能自拔。<br />
  184.                                         --
  185.                                     </div>
  186.                                 </li>
  187.                                 <li id="page_About">
  188.                                     <img src="images/bg_content.png" alt="" class="bg_cont">
  189.                                     <span class="back"><img src="images/nav2.png" alt="" usemap="#back"><a
  190.                                             href="index.html#close">返回</a></span>
  191.                                     <div class="pad">
  192.                                         <h2>恋爱历程</h2>
  193.                                         <div class="relative">
  194.                                             <div class="scroll">
  195.                                                 <span>黑丰息 &amp; 白风夕</span>
  196.                                                 <p>&nbsp;&nbsp;&nbsp;&nbsp;你还记得么？</p>
  197.                                                 <p>&nbsp;&nbsp;&nbsp;&nbsp;2022年05月20日。</p>
  198.                                                 <p>&nbsp;&nbsp;&nbsp;&nbsp;我们在且试天下相遇。</p>
  199.                                                 <p>&nbsp;&nbsp;&nbsp;&nbsp;然后.........</p>
  200.                                                 <p>&nbsp;&nbsp;&nbsp;&nbsp;过程.........</p>
  201.                                                 <p>&nbsp;&nbsp;&nbsp;&nbsp;愿得一人心，白首不分离</p>
  202.                                                 <p>&nbsp;&nbsp;&nbsp;&nbsp;执子之手，与子偕老</p>
  203.                                                 <p>&nbsp;&nbsp;&nbsp;&nbsp; - </p>
  204.                                             </div>
  205.                                         </div>
  206.                                     </div>
  207.                                 </li>
  208.                                 <li id="page_Talk">
  209.                                     <img src="images/bg_content.png" alt="" class="bg_cont">
  210.                                     <span class="back"><img src="images/nav3.png" alt="" usemap="#back"><a
  211.                                             href="index.html#close">返回</a></span>
  212.                                     <div class="pad">
  213.                                         <h2>絮叨絮叨</h2>
  214.                                         <div class="relative">
  215.                                             <div class="scroll">
  216.                                                 <div style="width:100%;float: left; border-bottom: 1px solid #CCCCCC;">
  217.                                                     黑丰息<br /><span style="float: right"> --白风夕 </span></div>
  219.                                                 <div style="width:100%;float: left">初恋像柠檬,虽酸却耐人寻味;热恋像火焰,虽热却不能自拔;失恋像伤疤,虽痛却无法释怀。因此咱们要懂得呵护感情!<br /><span
  220.                                                         style="float: right"> --白风夕 </span></div>
  221.                                             </div>
  222.                                         </div>
  223.                                     </div>
  224.                                 </li>
  225.                                 <li id="page_Message">
  226.                                     <img src="images/bg_content.png" alt="" class="bg_cont">
  227.                                     <span class="back"><img src="images/nav4.png" alt="" usemap="#back"><a
  228.                                             href="index.html#close">返回</a></span>
  229.                                     <div class="pad">
  230.                                         <h2>且试天下</h2>
  231.                                         <div class="relative">
  232.                                             <div align="center" class="scroll">
  233.                                                 如果你冷,我将你拥入怀中;如果你忧,我替你擦去泪痕;如果你爱我,我要向全世界广播…我只想给你我真实的爱。
  234.                                             </div>
  235.                                         </div>
  236.                                     </div>
  237.                                 </li>
  238.                                 <li id="page_Blog">
  239.                                     <img src="images/bg_content.png" alt="" class="bg_cont">
  240.                                     <span class="back"><img src="images/nav5.png" alt="" usemap="#back"><a
  241.                                             href="index.html#close">返回</a></span>
  242.                                     <div class="pad">
  243.                                         <h2>爱的感受</h2>
  244.                                         <div class="relative">
  245.                                             <div class="scroll">
  246.                                                 <ul class="gallery fancybox">
  247.                                                     <li style="line-height:20px">初恋像柠檬,虽酸却耐人寻味;热恋像火焰,虽热却不能自拔;失恋像伤疤,虽痛却无法释怀。因此咱们要懂得呵护感情!</li>
  248.                                                     
  249.                                                 </ul>
  250.                                             </div>
  251.                                         </div>
  252.                                     </div>
  253.                                 </li>
  254.                                 <li id="page_Time">
  255.                                     <img src="images/bg_content.png" alt="" class="bg_cont">
  256.                                     <span class="back"><img src="images/nav6.png" alt="" usemap="#back"><a
  257.                                             href="index.html#close">返回</a></span>
  258.                                     <div class="pad">
  259.                                         <h2>执子之手</h2>
  260.                                         <div id="loveHeart" style="margin-top: 30px;font-size: 25px;">
  261.                                             <span style="">愿得一人心，白首不分离？</span>
  262.                                             <div id="elapseClock" style="margin: 10px 0px 10px 0px;"></div>
  263.                                             <img src="images/1.gif" />　　　　<img src="images/2.gif" /><br /><br />
  264.                                             <div id="loveu">
  265.                                                 愉悦其实真的狠简单,有你有事做,有所期盼！<br />
  266.                                                 <div class="signature" style="float: right; margin-right: 50px;">白风夕
  267.                                                 </div>
  268.                                             </div>
  269.                                         </div>
  270.                                     </div>
  271.                     </div>
  272.                     </li>
  273.                     </ul>
  274.                     </article>
  275.                     <!--content end-->
  276.                 </div>
  277.             </div>
  278.             <div class="bg1">
  279.                 <div class="main">
  280.                     <!--footer -->
  281.                     <footer style="line-height:20px">
  282.                         <div id="copyright">
  283.                             <a href="" target=_blank></a> <a href="" target=_blank></a>
  284.                             </object>
  285.                         </div>
  286.                     </footer>
  287.                     <!--footer end-->
  288.                 </div>
  289.             </div>
  290.             </div>
  291.             </div>
  292.         </body>
  293. </html>

爱心花环表白HTML效果展示

1.支持切换音乐
2.支持改变文字和样式，修改图片
3.界面都是动态效果，图片静态看不出效果
请添加图片描述

动画图片表白HTML源码

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <title>执子之手，与子偕老</title>
  6.     <meta charset="utf-8">
  7.     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  8.     <style>
  9.         html,
  10.         body {
  11.             height: 100%;
  12.         }
  13.         body {
  14.             background-color: #000000;
  15.             margin: 0;
  16.             font-family: Helvetica, sans-serif;
  17.             ;
  18.             overflow: hidden;
  19.         }
  20.         a {
  21.             color: #ffffff;
  22.         }
  23.         #info {
  24.             position: absolute;
  25.             width: 100%;
  26.             color: #ffffff;
  27.             padding: 5px;
  28.             font-family: Monospace;
  29.             font-size: 13px;
  30.             font-weight: bold;
  31.             text-align: center;
  32.             z-index: 1;
  33.         }
  34.         #menu {
  35.             position: absolute;
  36.             bottom: 20px;
  37.             width: 100%;
  38.             text-align: center;
  39.         }
  40.         .element {
  41.             width: 100px;
  42.             /* 120 160 */
  43.             height: 100px;
  44.             box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.5);
  45.             border: 1px solid rgba(127, 255, 255, 0.25);
  46.             text-align: center;
  47.             cursor: default;
  48.         }
  49.         .element:hover {
  50.             box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.75);
  51.             border: 1px solid rgba(127, 255, 255, 0.75);
  52.         }
  53.         .element img {
  54.             width: 100px;
  55.             height: 100px;
  56.         }
  57.         .element .number {
  58.             position: absolute;
  59.             top: 20px;
  60.             right: 20px;
  61.             font-size: 12px;
  62.             color: rgba(127, 255, 255, 0.75);
  63.         }
  64.         .element .symbol {
  65.             position: absolute;
  66.             top: 40px;
  67.             left: 0px;
  68.             right: 0px;
  69.             font-size: 60px;
  70.             font-weight: bold;
  71.             color: rgba(255, 255, 255, 0.75);
  72.             text-shadow: 0 0 10px rgba(0, 255, 255, 0.95);
  73.         }
  74.         .element .details {
  75.             position: absolute;
  76.             bottom: 15px;
  77.             left: 0px;
  78.             right: 0px;
  79.             font-size: 12px;
  80.             color: rgba(127, 255, 255, 0.75);
  81.         }
  82.         button {
  83.             color: rgba(127, 255, 255, 0.75);
  84.             background: transparent;
  85.             outline: 1px solid rgba(127, 255, 255, 0.75);
  86.             border: 0px;
  87.             padding: 5px 10px;
  88.             cursor: pointer;
  89.         }
  90.         button:hover {
  91.             background-color: rgba(0, 255, 255, 0.5);
  92.         }
  93.         button:active {
  94.             color: #000000;
  95.             background-color: rgba(0, 255, 255, 0.75);
  96.         }
  97.         .show_info {
  98.             position: fixed;
  99.             background-color: rgba(0, 0, 0, .6);
  100.             padding: 10px;
  101.             width: 300px;
  102.             margin: 0 auto;
  103.             left: 0;
  104.             right: 0;
  105.             border-radius: 5px;
  106.             box-shadow: 0 0 10px 0 #fff;
  107.             top: 30%;
  108.         }
  109.         .show_info img {
  110.             display: block;
  111.             margin: auto;
  112.             border-radius: 5px;
  113.             box-shadow: 0 0 10px 0 #888;
  114.         }
  115.         .show_info .intro {
  116.             color: #fff;
  117.             text-indent: 20px;
  118.             margin-top: 10px;
  119.             height: 65px;
  120.             overflow: hidden;
  121.             display: -webkit-box;
  122.             -webkit-line-clamp: 3;
  123.             -webkit-box-orient: vertical;
  124.         }
  125.         .show_info .info_my {
  126.             text-align: center;
  127.         }
  128.         .show_info .info_my>* {
  129.             display: inline-block !important;
  130.             vertical-align: middle;
  131.         }
  132.         .show_info .info_my .info_mem {
  133.             color: #fff;
  134.             max-width: 120px;
  135.         }
  136.         .show_info .info_my .info_mem>div {
  137.             text-align: left;
  138.         }
  139.         .show_info .info_my .info_mem>div.nickname {
  140.             max-width: 120px;
  141.             text-overflow: ellipsis;
  142.             overflow: hidden;
  143.             white-space: nowrap;
  144.         }
  145.     </style>
  146.     <link rel="stylesheet" href="css/animate.min.css">
  147. </head>
  148. <body>
  149.     <script src="js/jquery.min.js"></script>
  150.     <script src="js/three.js"></script>
  151.     <script src="js/tween.min.js"></script>
  152.     <script src="js/TrackballControls.js"></script>
  153.     <script src="js/CSS3DRenderer.js"></script>
  154.     <div id="container"></div>
  155.     <audio autoplay="" loop="">
  156.         <source src="img/1.mp3">
  157.     </audio>
  158.     <div id="menu">
  159.         <button id="table">爱的框框</button>
  160.         <button id="sphere">爱的圆润</button>
  161.         <button id="helix">爱的眩晕</button>
  162.         <button id="grid">爱的边框</button>
  163.     </div>
  164.     <div class="show_info animated" style="display:none;">
  165.         <div class="info_my">
  166.             <img width=200px src="img/c.png" />
  167.         </div>
  168.         <div class="intro">初恋像柠檬,虽酸却耐人寻味;热恋像火焰,虽热却不能自拔;失恋像伤疤,虽痛却无法释怀。因此咱们要懂得呵护感情!</div>
  169.     </div>
  170. </body>
  171. </html>

动画图片表白HTML效果展示

1.支持切换音乐
2.支持改变文字和样式，修改图片
3.界面都是动态效果，图片静态看不出效果
请添加图片描述

酷炫爱心表白HTML源码

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>执子之手，与子偕老</title>
  6.     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7.     <meta name="language" content="zh-CN">
  8.     <style>
  9.         html,
  10.         body {
  11.             margin: 0px;
  12.             width: 100%;
  13.             height: 100%;
  14.             overflow: hidden;
  15.             background: #000;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <canvas id="canvas" style="position:absolute;width:100%;height:100%;z-index:8888"></canvas>
  21.     <canvas style="position:absolute;width:100%;height:100%;z-index:9999" class="canvas"></canvas>
  22.     <div class="overlay">
  23.         <div class="tabs">
  24.             <div class="tabs-panels">
  25.                 <ul class="tabs-panel commands">
  26.                 </ul>
  27.             </div>
  28.         </div>
  29.     </div>
  30.     <div style="width:100%;color:white;font-family:STSong,华文宋体;margin:20px;line-height:40px;">
  31.         BY:白风夕<br/>
  32.         愿得一人心，白首不分离<br/>
  33.         我忽略时刻,正因等你出现;我忽略距离,正因等你出现;我忽略语言,正因想你一向未变。亲爱的,想你了。<br/>
  34.         愉悦其实真的狠简单,有你有事做,有所期盼。<br/>
  35.         初恋像柠檬,虽酸却耐人寻味;热恋像火焰,虽热却不能自拔;失恋像伤疤,虽痛却无法释怀。因此咱们要懂得呵护感情!<br/>
  36.         如果你冷,我将你拥入怀中;如果你忧,我替你擦去泪痕;如果你爱我,我要向全世界广播…我只想给你我真实的爱。<br/>
  37.         黑丰息 笔
  38.     </div>
  39. </body>
  40. </html>

酷炫爱心表白HTML效果展示

1.支持切换音乐
2.支持改变文字和样式，修改图片
3.界面都是动态效果，图片静态看不出效果
请添加图片描述

树形爱心表白HTML源码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <title>执子之手，与子偕老</title>
  6.     <meta name="language" content="zh-CN">
  7.     <link type="text/css" rel="stylesheet" href="./Love_files/default.css">
  8.     <script type="text/javascript" src="./Love_files/jquery.min.js"></script>
  9.     <script type="text/javascript" src="./Love_files/jscex.min.js"></script>
  10.     <script type="text/javascript" src="./Love_files/jscex-parser.js"></script>
  11.     <script type="text/javascript" src="./Love_files/jscex-jit.js"></script>
  12.     <script type="text/javascript" src="./Love_files/jscex-builderbase.min.js"></script>
  13.     <script type="text/javascript" src="./Love_files/jscex-async.min.js"></script>
  14.     <script type="text/javascript" src="./Love_files/jscex-async-powerpack.min.js"></script>
  15.     <script type="text/javascript" src="./Love_files/functions.js" charset="utf-8"></script>
  16.     <script type="text/javascript" src="./Love_files/love.js" charset="utf-8"></script>
  17. </head>
  19. <body>
  20.     <div id="main">
  21.         <div id="error">亲，您使用的浏览器无法支持即将显示的内容，请换成谷歌(<a
  22.                 href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a
  23.                 href="http://firefox.com.cn/download/">Firefox</a>)浏览器哟~</div>
  24.         <div id="wrap">
  25.             <div id="text">
  26.                 <div id="code">
  27.                     <span class="say" style="color:red;">愿得一人心，白首不分离</span><br><br>
  28.                     <span class="say">我忽略时刻,正因等你出现;我忽略距离,正因等你出现;我忽略语言,正因想你一向未变。亲爱的,想你了。</span><br>
  29.                     <span class="say">愉悦其实真的狠简单,有你有事做,有所期盼。</span><br>
  30.                     <span class="say">初恋像柠檬,虽酸却耐人寻味;热恋像火焰,虽热却不能自拔;失恋像伤疤,虽痛却无法释怀。因此咱们要懂得呵护感情!</span><br>
  31.                     <span class="say">如果你冷,我将你拥入怀中;如果你忧,我替你擦去泪痕;如果你爱我,我要向全世界广播…我只想给你我真实的爱。</span><br>
  32.                     <br>
  33.                     <span class="say" style="color:red;">愿得一人心，白首不分离</span><br><br>
  34.                     <span class="say">我忽略时刻,正因等你出现;我忽略距离,正因等你出现;我忽略语言,正因想你一向未变。亲爱的,想你了。</span><br>
  35.                     <span class="say">愉悦其实真的狠简单,有你有事做,有所期盼。</span><br>
  36.                     <span class="say">初恋像柠檬,虽酸却耐人寻味;热恋像火焰,虽热却不能自拔;失恋像伤疤,虽痛却无法释怀。因此咱们要懂得呵护感情!</span><br>
  37.                     <span class="say">如果你冷,我将你拥入怀中;如果你忧,我替你擦去泪痕;如果你爱我,我要向全世界广播…我只想给你我真实的爱。</span><br>
  38.                     <br>
  39.                     <span class="say"><span class="space"></span> -- 息夕。</span>
  40.                 </div>
  41.             </div>
  42.             <div id="clock-box">
  43.                 <a href="https://blog.csdn.net/weixin_43151418/article/details/124746163?spm=1001.2014.3001.5502" target="_blank">黑丰息</a> 和 <a href="https://blog.csdn.net/weixin_43151418/article/details/124746163?spm=1001.2014.3001.5502" target="_blank">白风夕</a> 在一起的
  44.                 <div id="clock"></div>
  45.             </div>
  46.             <canvas id="canvas" width="1100" height="680"></canvas>
  47.         </div>
  48.     </div>
  49. </body>
  50. </html>

树形爱心表白HTML效果展示

请添加图片描述

唯美爱心表白HTML源码

  1. <!doctype html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>执子之手，与子偕老</title>
  7.     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  8.     <link rel="stylesheet" href="css/demo.css" />
  9. </head>
  11. <body>
  12.     <img src="images/xx.png" class="gb" />
  13.     <!--灰色的遮罩层-->
  14.     <!--Tz_gray start-->
  15.     <div id="Tz_gray">
  16.         
  17.         <!--内容发表区-->
  18.         <div class="Text">
  19.             <span class="say">愿得一人心，白首不分离</span><br>
  20.             <span class="say">我忽略时刻,正因等你出现;我忽略距离,正因等你出现;我忽略语言,正因想你一向未变。亲爱的,想你了。</span><br>
  21.             <span class="say">愉悦其实真的狠简单,有你有事做,有所期盼。</span><br>
  22.             <span class="say">初恋像柠檬,虽酸却耐人寻味;热恋像火焰,虽热却不能自拔;失恋像伤疤,虽痛却无法释怀。因此咱们要懂得呵护感情!</span><br>
  23.             <span class="say">如果你冷,我将你拥入怀中;如果你忧,我替你擦去泪痕;如果你爱我,我要向全世界广播…我只想给你我真实的爱。</span><br>
  24.             <span class="say">执子之手，与子偕老</span><br>
  25.         </div>
  26.     </div>
  27.     <!--Tz_gray end-->
  28.     <audio src="MP3/2.mp3" id="Music"></audio>
  29.     <!--music end-->
  30.     <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
  31.     <script src="js/snowfall.jquery.js"></script>
  32.     <script src="js/demo.js"></script>
  33.     </div>
  34. </body>
  35. </html>

唯美爱心表白HTML效果展示

1.支持切换音乐
2.支持改变文字和样式，修改图片
3.界面都是动态效果，图片静态看不出效果
请添加图片描述

源码下载

【博主推荐】HTML浪漫表白求爱(源码)

标签： html safari css
本文转载自: https://blog.csdn.net/weixin_43151418/article/details/124970985
版权归原作者 xcLeigh 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【博主推荐】HTML浪漫表白求爱(附源码)”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？