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

article/2025/9/10 13:06:33

分享一个生日祝福网站源码,可以给她做了个网站作为生日祝福。主要是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 谢谢~~


http://chatgpt.dhexx.cn/article/r8VbQLKG.shtml

相关文章

生日快乐网站模板(个人制作)(HTML5+CSS3+JS)

哈&#xff0c;前一阵子一个比较要好的朋友过生日&#xff0c;就给她做了一个网站作为生日祝福。也花了挺多的时间去复习了抛弃了有一段时间的HTML和CSS&#xff0c;又去学习了CSS3。最后做出来的效果自己还是挺满意的&#xff0c;因此在这里放出来&#xff0c;也希望能帮助到大…

对绝对地址的操作

&#xfeff;&#xfeff; 嵌入式系統中往往需要讓程序跳到內存的某個地址去執行&#xff0c;比如想讓程序跳轉到絕對地址是0x100000去執行&#xff0c;應該怎麼做&#xff1f; 這樣&#xff1a; * (( void ( * )( void )) 0x100000 )(); 即可。 解釋一下&#xff0c;想讓程序…

相对地址和绝对地址的理解

相对地址和绝对地址 个人对地址的理解 第一## 标题 第二&#xff0c;全部的地址

手机中geetest是什么文件_手机中的英文文件夹都表示什么意思?哪些是可以删除的?...

现在我们使用手机会积攒下大量的垃圾文件&#xff0c;所占的内存就会越来越多&#xff0c;长此以久手机就会开始卡顿。但当我们打开手机内存想要清理一下的时候又会发现文件夹全是英文名&#xff0c;一个也看不懂&#xff0c;生怕删错了重要文件搞坏手机。其实因为我们手机使用…

软件ETest

ETest简介 ETest是一款软件开发环境IDE&#xff0c;基于该IDE可以完成嵌入式系统测试软件的开发与部署。该产品是由凯云科技率先在行业内推出的国产自主可控半实物仿真测试开发平台&#xff0c;有效打破了国内该领域长期由进口软件LabView、DSpace等产品垄断的格局。ETest可广…

Geetest极验验证码的使用

后端部署 1.首先从Github: gt3-python-sdk下载.zip文件 &#xff0c;用于后台搭建 gt3-java-sdk-master\src\sdk\GeetestLib.java 这个文件相当java中的实体类 gt3-java-sdk-master\src\demo\demo1\GeetestConfig.java &#xff0c;是geetest的配置文件&#xff0c;用来放我们在…

GEE scale

以下从gee 官网翻译 gee中scale 表示像素分辨率&#xff0c;与其他GIS和图像处理平台不同&#xff0c;分析的规模由输出决定&#xff0c;而不是由输入决定。比如&#xff0c;当你从服务器请求返回一个图像或者统计结果时&#xff0c;您可以指定输入数据的scale到分析过…

gtest 单元测试工具的基本使用

gtest 单元测试 gtest 简介gtest 优点安装 gtest测试 demo总结 gtest 简介 gtest是Google的一套用于编写C测试的框架&#xff0c;可以运行在很多平台上&#xff08;包括Linux、Mac OS X、Windows、Cygwin等等&#xff09;。基于xUnit架构。支持很多好用的特性&#xff0c;包括…

Python Selenium破解滑块验证码最新版(GEETEST 95%以上通过率)

一、滑块验证码简述 有爬虫&#xff0c;自然就有反爬虫&#xff0c;就像病毒和杀毒软件一样&#xff0c;有攻就有防&#xff0c;两者彼此推进发展。而目前最流行的反爬技术验证码&#xff0c;为了防止爬虫自动注册&#xff0c;批量生成垃圾账号&#xff0c;几乎所有网站的注册页…

Python Selenium 破解极验(GeeTest)滑动验证

A r m o u r G e e T e s t ArmourGeeTest ArmourGeeTest [TOS] 本项目仅供交流学习&#xff0c;有疑问请在issue中提出&#xff1b;本项目不提供面向任何商业需求的版本迭代&#xff1b;关于本项目源码的使用请遵循Apache-2.0 License&#xff1b;禁止任何人使用本项目及其分支…

基于行为式验证的GeeTest验证码研究

什么是行为式验证 行为式验证的核心思想是利用用户的“行为特征”来做验证安全判别。整个验证框架采用高效的“行为沙盒”主动框架, 这个框架会引导用户在“行为沙盒”内产生特定的行为数据&#xff0c;利用“多重复合行为判别”算法从特指、视觉、思考等多重行为信息中辨识出生…

reactNative集成极验(GeeTest)

考虑到网上还没有rn极验的集成文章&#xff0c;前俩天公司业务正好集成了一下android和ios的sdk&#xff0c;平时时间少没时间写&#xff0c;今天简单介绍一下集成方案&#xff0c;要是时间允许的话&#xff0c;我搞一个极验的rn版sdk&#xff0c;给大家分享一下&#x1f604; …

项目gtest测试框架 - GoogleTest(十)

精简版本的C单元测试框架 &#xff0c;通过编写这个简单的测试框架&#xff0c;将有助于我们理解gtest。 1. 目录 类型文件说明文件./CMakeLists.txt整体项目工程文件目录./debiandeb包打包脚本目录&#xff0c;未实现目录./rpmrpm打包目录&#xff0c;rpm打包的详细内容可以…

Geetest极验+VUE把验证码绑定到自己的按钮(例如获取验证码)

极验流程 客户端gt.js里调用initGeetest发起初始化&#xff0c;会向后端获取gt等参数&#xff08;后端会跟极验通信&#xff09;&#xff0c;然后前端会根据传回的数据去决定用什么做验证&#xff0c;然后验证通过之后会有三个参数提供给后端进行二次校验的。具体接入看极验官…

【日常】Geetest滑动验证码(三代canvas版)处理小结(以B站登录验证为例)

问题描述 这个问题确实让我困扰了太长时间&#xff0c;今天花了半天时间&#xff0c;并没有找到非常完满的解决方案&#xff0c;只是在解决问题的过程中学会了一些其他知识&#xff0c;我最后还是要通过人工来判断大致的移动距离&#xff0c;然后根据误差做微调。大致做个总结…

geetest极验空间推理验证码破解与研究

看了很多的破解滑动验证码&#xff0c;决定破解一下空间推理验证码。破解思路&#xff0c;通过分析接口请求&#xff0c;对图片物体进行定位分类&#xff0c;通过模拟请求破解验证码。 研究的网站为 https://www.geetest.com/show 一、极验请求分析 请求详细 一、register-s…

googletest简介

googletest是由谷歌的测试技术团队开发的测试框架&#xff0c;使用c实现&#xff0c;具有跨平台等特性。 好的测试框架 引用谷歌给出的文档&#xff0c;好的测试应当具备以下特征&#xff1a; 测试应该是独立的和可重复的。调试一个由于其他测试而成功或失败的测试是一件痛苦…

破解极验(geetest)验证码

最近在搞爬虫的时候在好几个网站都碰到了一种叫做geetest的滑动条验证码,一直没有太好的办法只能在触发这个验证码后发个报警去手动处理一下。http://www.geetest.com/exp_embed是他们官网的样例。 后来研究了下觉得要破解这个验证码有这么几个问题: 无法直接通过发送…

破解滑块验证码最新版(GEETEST 95%以上通过率)

一、滑块验证码简述 有爬虫&#xff0c;自然就有反爬虫&#xff0c;就像病毒和杀毒软件一样&#xff0c;有攻就有防&#xff0c;两者彼此推进发展。而目前最流行的反爬技术验证码&#xff0c;为了防止爬虫自动注册&#xff0c;批量生成垃圾账号&#xff0c;几乎所有网站的注册页…

极验GeeTest简单demo

概述 人机验证 3.0 解决方案(基于生物行为与人工智能) 2012 年极验将人机验证从1.0时代推动到了 2.0 时代。在 5 年时间中&#xff0c;超过千亿次数据学习与优化&#xff0c;极验利用三角防护理论和 AI 智能决策引擎&#xff0c;全面更新安全架构。2017 年&#xff0c;正式推出…