HTML生日快乐-生日祝福（烟花+粒子动画）

显示全部楼层 · 2023-8-22 15:02:30

本人对前端不太相识，对网上代码举行简单修改，完成部署。
  粒子动画：https://github.com/kennethcachia/shape-shifter
  烟花：网上有很多相关代码，未找到原作者
  效果：http://8.130.106.21/HappyBirthday/HappyBirthday.html
  代码：
    1）百度网盘
          链接：https://pan.baidu.com/s/1-pC9d_s4ldD6y5Y3KZCkQg
        提取码：6666
    2）CSDN免费下载
          https://download.csdn.net/download/kb16045125/86951979
  一、HTML页面制作

1、更换title

在HappyBirthday/HappyBirthday.html中的title换成相应人的名字

<head>
<meta charset="utf-8">
<title>XXX生日快乐</title>
<link href="favicon.ico" rel="shortcut icon">
</head>

复制代码

2、粒子名字

在粒子展示祝福的名字举行更换

在HappyBirthday/js/index.js#44行处修改

if (i !== -1) {
S.UI.simulate(decodeURI(action).substring(i + 3));
} else {
S.UI.simulate('|#countdown 3||祝|XXX|生日快乐|祝你|生日快乐|祝你幸福|祝你健康|前途光明|祝你|生日快乐！|#icon heart|#icon heart-empty|#icon heart');
}

复制代码

3、粒子颜色

修改粒子动画展示的颜色，视频中利用了粉色（255,192,203）
HappyBirthday/js/index.js#417行处修改

S.Dot = function (x, y) {
this.p = new S.Point({
x: x,
y: y,
z: 5,
a: 1,
h: 0
});
this.e = 0.07;
this.s = true;
this.c = new S.Color(255, 192, 203, this.p.a);
this.t = this.clone();
this.q = [];
};

复制代码

4、装备兼容

在原版代码中，仅仅在电脑欣赏器有一个较为好的展示效果，在手机欣赏器上字表现效果不佳以及延时不敷，但是无法正常表现，重要调整了粒子间距和延时时间
粒子间距：先设置默认间距为8（手机较好表现），然后判断屏幕是否大于手机一样平常尺寸，调整大一点13（平板和电脑较好表现）。
粒子间距变小，数目变多，加载起来就慢。
HappyBirthday/js/index.js#525行处修改

if ((window.innerWidth>500 && window.innerHeight>500)){
gap = 13;
}

复制代码

延时时间：当粒子数目变多，加载慢，按照原作者设置的时间来展示，可能上一个字没展示完就要去展示下一个字，导致变成一坨。
HappyBirthday/js/index.js#119行处修改
HappyBirthday/js/index.js#177行处修改

// 118行
var delay1,delay2;
delay1 = 3000;
delay2 = 5000;
// 177行
if (window.innerWidth>500 && window.innerHeight>500){
delay1 = 1000;
delay2 = 2000;
}

复制代码

5、音乐播放

由于在某些装备上，无法主动播放音乐，需要通过点击触发，增长点击爱心，开始播放。
二、阿里云部署

通过部署在阿里云，可以通过网址举行访问。
我租了一个阿里云，通过简单部署静态页面就可以访问。
（假如有兄弟告急利用，也可以叫我资助部署一下，哈
1、开放80端口

找到本身的实例，点击完全组，设置开放一个80端口

开放80端口

2、安装httpd

yum -y install httpd

复制代码

3、启动httpd

service httpd start
service httpd status

复制代码

启动之后可以看到如下画面

4、移动httpd.conf

默认会发布var/www/html下面的网页

cp /etc/httpd/conf/httpd.conf /var/www/html

复制代码

5、上传资源到var/www/html

# 解压压缩包
unzip HappyBirthday.zip
# 删除压缩包
rm -rf HappyBirthday.zip

复制代码

6、重启hhtpd

service httpd restart

复制代码

7、地点访问

http://8.130.106.21/HappyBirthday/HappyBirthday.html

复制代码

来源：https://blog.csdn.net/kb16045125/article/details/127802070
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

FrankJScott · 前天 21:39

In reply to the person inquiring about link ke dana, rtp slot games, casino slot indonesia, cara mengisi akun shopee, bisa digunakan untuk, bank di bank, android slot games, 88 casino, cara kirim uang dari link aja ke dana, link game judi slot online, I highly recommend this top judi slot toto tips or slot play, mg slot game, link game judi slot online, cara transfer deposit, judi slot gacor, cara transfer dari hp bank bri, fortuna slots, asia slot online, cara kirim saldo link aja ke dana, slots login, on top of this high rated judi slot toto advice which is worth considering with spin game slot, bri masuk, jago slots, cara transfer bank ke shopee, e money bank bca, cara transfer bank mandiri, agen slot games, flow gaming slot, cara mengisi akun shopee, slot online gates of olympus, which is worth considering with this great judi slot toto site which is also great. Also, have a look at this additional info about judi slot toto info as well as bantuan bank bni, bank mandiri bca, new hacksaw slot, slot online 24 jam, akun dana login, cara transfer dari bank bca ke akun dana, hacksaw gaming rtp, daftar link, link aplikasi dana, slot online rtp, not to mention this recommended site on judi slot toto tips not forgetting sites such as slot promotion, transfer dari bank mandiri ke bri, sistem to slot, slot gacor logo, 4d online, funny post about alongside all bg mandiri, slots win casino, mega gacor login, cara transfer dana ke link, cara transfer dari bank bni, for good measure. Check more @ Great Tajir4D Website f6a1f17

[web教学] HTML生日快乐-生日祝福（烟花+粒子动画）

Top Slot Judi Toto Site

浏览过的版块