生日快乐网站模板(HTML5+JS+CSS) 带音效

"wink

已于 2022-02-28 23:24:45 修改

阅读量1.4w

点赞数 52

文章标签： css javascript html5

于 2022-02-28 23:10:48 首次发布

本文链接： https://blog.csdn.net/weixin_61370021/article/details/123194140

版权

分享一个生日祝福网站源码，可以给她做了个网站作为生日祝福。主要是HTML、CSS、JS，修改了很多地方，现在作为模板放在这，希望能够对大家有所帮助。

源码链接：https://pan.baidu.com/s/1KOcCPmbsHpQcksJPqiAuZg
提取码：0325

效果图 >

修改密码 > 在birthday文件夹下，有js/index.js文件：

 //修改此处的冰冰,0315即可修改登录的用户名和密码
 if(userName=="冰冰" &&  pwd=="0315"){
   event.preventDefault();
   $('form').fadeOut(500);
   $('.wrapper').addClass('form-success');
   setTimeout(function(){location.href="BirthdayCake.html";},2000);
 }

替换memories页面文字和图片 >（以第三屏为例）

<!--第三屏-->

<div class="section">
    <!-- 下面两个div分别实现的左边那条轴和那个小球 -->
    <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></p>包裹起来 -->
           <p> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
           <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        </div>
        <div class="ly-imgbox21">
          <!-- 这里更改图片，图片请先改好对应的名字并且放到img文件夹下面
              如果你不懂css，那么最好就裁剪图片至合适大小为止
              如果你会css，那么可以根据class名字去修改对应css的宽度设置-->
          <img class="ly-img21" src="img/2014.11.26-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">
            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        </div>
        <div class="ly-imgbox22">
          <img class="ly-img22" src="img/2014.12.19-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">
            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        </div>
        <div class="ly-imgbox23">
          <img class="ly-img23" src="img/2014.12.20-1.jpg">
        </div>
    </div>
    <div class="ly-triangle23"></div>
</div>

修改背景音乐 >

在BirthdayCake.html、index.html、Memories.html找到代码music/xx.mp3修改为自己想要的音乐就好了

如何给别人看

1. 打成压缩包发给别人

2. 部署至云服务器或者虚拟主机（需要域名，成本较高）

3. 部署至Gitee Pages（gitee在国内，速度快，微信不回拦截，无需域名和服务器/虚拟主机，几乎零成本）

分享到这了自己可以修改背景和音乐呢如果你觉得还可以请star 谢谢~~