HTML5生日祝福网页制作 ❤粉色少女系列为你定制❤ HTML+CSS+JavaScript

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。

🧡文章末尾-已经附上源码下载地址

🧡作者主页-更多源码

🧡七夕情人节专栏文章

作品介绍

1.网页作品简介 ：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七夕告白, 求婚, 浪漫爱情3D相册,炫酷代码 ,已经兼容手机端和电脑端, 快来制作一款高端的表白网页送(他/她)生日祝福网页,制作修改简单, 需替换图片和文字即可.可自行更换背景音乐。

2.网页作品编辑：任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ ）均可修改网页。

文章目录

HTML5生日祝福网页制作 ❤粉色少女系列为你定制❤ HTML+CSS+JavaScript
作品介绍
一、作品展示(已兼容手机端/电脑端)
二、文件目录
三、代码实现
四、学习资料
五、源码下载
六、更多源码

一、作品展示(已兼容手机端/电脑端)

二、文件目录

三、代码实现


<!--
 * @Author: your name
 * @Date: 2021-03-25 09:07:37
 * @LastEditTime: 2021-03-25 10:21:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tiny-heart-master\birthday-mobile\Memories.html
-->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no"
    />
    <title>Happy Birthday</title>
    <link rel="stylesheet" href="css/jquery.fullPage.css" />
    <link rel="stylesheet" href="css/memories.css" />
  </head>

  <body>
    <!-- 背景音乐 -->
    <div style="display: none">
      <!-- 网易云外链 -->
      <iframe
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
        width="330"
        height="86"
        src="https://music.163/outchain/player?type=2&id=480353&auto=1&height=66"
      ></iframe>
    </div>
    <div class="bgcolor">
      <div style="z-index: 100" id="dowebok">
        <!--第一屏-->
        <div class="section">
          <div class="ly-box01">
            <div class="ly-txt01">
              <p class="ly-stxt01">
                宝贝，你的生日就在今天，祝你可爱依旧，快乐多多！
              </p>
              <p class="ly-stxt02">XXXXXXXXXXXXXXXXXXXXXXX</p>
              <p class="ly-stxt03">XXXXXXXXXXXXXXXXXXXXXXX</p>
              <p class="ly-stxt04">XXXXXXXXXXXXXXXXXXXXXXX</p>
              <p class="ly-stxt05">XXXXXXXXXXXXXXXXXXXXXXX</p>
            </div>
            <div class="ly-txt02">
              <p class="ly-stxt06">XXXXXXXXXXXXXXXXXXXXXXX</p>
              <p class="ly-stxt07">XXXXXXXXXXXXXXXXXXXXXXX</p>
              <p class="ly-stxt08">XXXXXXXXXXXXXXXXXXXXXXX</p>
              <p class="ly-stxt09">XXXXXXXXXXXXXXXXXXXXXXX</p>
              <p class="ly-stxt10">XXXXXXXXXXXXXXXXXXXXXXX</p>
            </div>
          </div>
        </div>

        <!--第二屏-->

        <div class="section">
          <div class="timeline"></div>
          <div class="timepoint11"></div>
          <div class="ly-box11">
            <div class="ly-txt11">201X-1X-1X</div>
            <div class="ly-txt12">XXXXXXXXXXXXXXXXXXXX</div>
            <div class="ly-imgbox11">
              <img class="ly-img11" src="img/1.jpg" />
            </div>
          </div>
          <div class="ly-triangle11"></div>

          <div class="ly-box12">
            <div class="ly-txt13">201X-1X-1X</div>
            <div class="ly-txt14">
              <p>XX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
            </div>
          </div>
          <div class="ly-triangle12"></div>
        </div>

        <!--第三屏-->

        <div class="section">
          <div class="timeline"></div>
          <div class="timepoint21"></div>
          <div class="ly-box21">
            <div class="ly-txt21">201X-1X-2X</div>
            <div class="ly-txt22">
              <p>XXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXX</p>
            </div>
            <div class="ly-imgbox21">
              <img class="ly-img21" src="img/1.png" />
            </div>
          </div>
          <div class="ly-triangle21"></div>

          <div class="ly-box22">
            <div class="ly-txt23">201X-1X-1X</div>
            <div class="ly-txt24">
              <p>XXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXX</p>
            </div>
            <div class="ly-imgbox22">
              <img class="ly-img22" src="img/1.png" />
            </div>
          </div>
          <div class="ly-triangle22"></div>

          <div class="ly-box23">
            <div class="ly-txt25">201X-1X-2X</div>
            <div class="ly-txt26">
              <p>XXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXX</p>
            </div>
            <div class="ly-imgbox23">
              <img class="ly-img23" src="img/1.jpg" />
            </div>
          </div>
          <div class="ly-triangle23"></div>
        </div>

        <!--第四屏-->

        <div class="section">
          <div class="timeline"></div>
          <div class="timepoint31"></div>
          <div class="ly-box31">
            <div class="ly-txt31">201X-1X-2X</div>
            <div class="ly-txt32">
              <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
            </div>
            <div class="ly-imgbox31">
              <img class="ly-img31" src="img/1.jpg" />
            </div>
          </div>
          <div class="ly-triangle31"></div>

          <div class="ly-box32">
            <div class="ly-txt33">201X-1X-2X</div>
            <div class="ly-txt34">
              <p>XXXXXXXXXXXXXXXXXXX</p>
            </div>
            <div class="ly-imgbox31">
              <img class="ly-img31" src="img/1.png" />
            </div>
          </div>
          <div class="ly-triangle32"></div>
        </div>

        <!--第五屏-->
        <div class="section">
          <div class="timeline"></div>
          <div class="timepoint21"></div>
          <div class="ly-box52">
            <div class="ly-txt21">2015-01-01</div>
            <div class="ly-txt22">
              <p>XXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXX</p>
            </div>
            <div class="ly-imgbox21">
              <img class="ly-img21" src="img/1.jpg" />
            </div>
          </div>
          <div class="ly-triangle21"></div>

          <div class="ly-box22">
            <div class="ly-txt23">201X-0X-1X</div>
            <div class="ly-txt51">
              <p>XXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXX</p>
            </div>
            <div class="ly-imgbox22">
              <img class="ly-img22" src="img/1.png" />
            </div>
          </div>
          <div class="ly-triangle22"></div>

          <div class="ly-box51">
            <div class="ly-txt25">201X-0X-1X</div>
            <div class="ly-txt26">
              <p>XXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
            </div>
            <div class="ly-imgbox23">
              <img class="ly-img23" src="img/1.jpg" />
            </div>
          </div>
          <div class="ly-triangle23"></div>
        </div>

        <!--第六屏-->
        <div class="section">
          <div class="timeline"></div>
          <div class="timepoint21"></div>
          <div class="ly-box21">
            <div class="ly-txt21">201X-0X-1X</div>
            <div class="ly-txt22">
              <p>XXXXXXXXXX</p>
              <p>XXXXXXXXXX</p>
              <p>XXXXXXXXXX</p>
              <p>XXXXXXXXXX</p>
              <p>XXXXXXXXXX</p>
            </div>
            <div class="ly-imgbox21">
              <img class="ly-img21" src="img/1.png" />
            </div>
          </div>
          <div class="ly-triangle21"></div>


              <p>XXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXX</p>
            </div>
            <div class="ly-imgbox91">
              <img class="ly-img91" src="img/1.jpg" />
            </div>
          </div>
          <div class="ly-triangle22 xx92"></div>

          <div class="ly-box92">
            <div class="ly-txt25">201X-0X-2X</div>
            <div class="ly-txt92">
              <p>XXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXX</p>
            </div>
            <div class="ly-imgbox92">
              <img class="ly-img92" src="img/1.jpg" />
            </div>
          </div>
          <div class="ly-triangle91"></div>

          <div class="ly-box93">
            <div class="ly-txt25">201X-0X-2X</div>
            <div class="ly-txt93">
              <p>XXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXX</p>
            </div>
            <div class="ly-imgbox93">
              <img class="ly-img93" src="img/1.jpg" />
            </div>
          </div>
          <div class="ly-triangle92"></div>
        </div>
        <!--第十屏-->

        <div class="section">
          <div class="timeline"></div>
          <div class="timepoint11"></div>
          <div class="ly-box81">
            <div class="ly-txt11">201X-0X-0X</div>
            <div class="ly-txt82" style="top: 8%">
              <p class="wwww1">XXXXXXXXXXXXXXXXXXX</p>
              <p class="wwww1">XXXXXXXXXXXXXXXXXXX</p>
              <p class="wwww1">XXXXXXXXXXXXXXXXXXX</p>
            </div>
            <div class="ly-imgbox81">
              <img class="ly-img81" src="img/1.jpg" />
            </div>
          </div>
          <div class="ly-triangle11"></div>

          <div class="ly-box82">
            <div class="ly-txt13">201X-0X-1X</div>
            <div class="ly-txt84">
              <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
              <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
            </div>
          </div>
          <div class="ly-triangle82"></div>
        </div>
      </div>
      <!--动态方块-->
      <ul class="bg-bubbles">
        <li>
          <img src="./img/timg.gif" style="width: 100%; height: 100%" />
        </li>
        <li>
          <img src="./img/timg.gif" style="width: 100%; height: 100%" />
        </li>
        <li>
          <img src="./img/timg.gif" style="width: 100%; height: 100%" />
        </li>
        <li>
          <img src="./img/timg.gif" style="width: 100%; height: 100%" />
        </li>
        <li>
          <img src="./img/timg.gif" style="width: 100%; height: 100%" />
        </li>
        <li>
          <img src="./img/timg.gif" style="width: 100%; height: 100%" />
        </li>
        <li>
          <img src="./img/timg.gif" style="width: 100%; height: 100%" />
        </li>
        <li>
          <img src="./img/timg.gif" style="width: 100%; height: 100%" />
        </li>
        <li>
          <img src="./img/timg.gif" style="width: 100%; height: 100%" />
        </li>
        <li>
          <img src="./img/timg.gif" style="width: 100%; height: 100%" />
        </li>
      </ul>
    </div>
    <!-- <audio muted src="music/1.mp3" autoplay="autoplay" loop="loop"></audio> -->
    <audio src="music/3.mp3" autoplay="autoplay" loop="loop"></audio>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/jquery.fullPage.min.js"></script>
    <!-- <script src="js/auto-play.js"></script> -->
    <script src="js/memories.js"></script>
  </body>
</html>

四、学习资料

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

五、源码下载

【百度网盘-完整源码下载地址↓】

链接：https://pan.baidu/s/1UdFzRE6mEKC5D1xALTMbYw
提取码：8888

六、更多源码

❤100款表白网页演示地址

❤100款表白网页在线视频演示

更多推荐

HTML5生日祝福网页制作 (粉色系列为你定制) HTML+CSS+JavaScript

HTML5生日祝福网页制作 (粉色系列为你定制) HTML+CSS+JavaScript

HTML5生日祝福网页制作 ❤粉色少女系列为你定制❤ HTML+CSS+JavaScript

作品介绍

文章目录

一、作品展示(已兼容手机端/电脑端)

二、文件目录

三、代码实现

四、学习资料

五、源码下载

六、更多源码

发布评论取消回复

最近发表

热门文章

标签列表

HTML5生日祝福网页制作 (粉色系列为你定制) HTML+CSS+JavaScript

HTML5生日祝福网页制作 ❤粉色少女系列为你定制❤ HTML+CSS+JavaScript

作品介绍

文章目录

一、作品展示(已兼容手机端/电脑端)

二、文件目录

三、代码实现

四、学习资料

五、源码下载

六、更多源码

相关文章

发布评论取消回复

最近发表

热门文章

标签列表