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

本文介绍: HTML生日快乐–生日祝福（烟花+粒子动画）粒子动画：https://github.com/ken net h ca c hi a/shape–shift e r 烟花：网上有许多相关代码，未找到原作者效果：http://8.130.106.21/Happ yBi r th day/Happ yBi r th day.html

在HappyBi r th day/HappyBir th day.html中的title换成相应人的名字

&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;XXX生日快乐&lt;/title&gt;

    &lt;style>
        html,body{
            margin:0px;
            width:100%;
            height:100%;
            overflow:hidden;
            background:linear-gradient(to left top,blue, #ffc0cb);
        }
    </style>
    <link href="favicon.ico" rel="shortcut icon">
</head>

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

在HappyBir th day/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');
}

修改粒子动画展示的颜色，视频中使用了粉色（255,192,203）

HappyBirt h day/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 = [];
};

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

  // 118行
  var delay1,delay2;
  delay1 = 3000;
  delay2 = 5000;


  // 177行
  if (window.innerWidth>500 &amp;&amp; window.innerHeight>500){
    delay1 = 1000;
    delay2 = 2000;
   }

yum -y install httpd

service httpd start
service httpd status

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

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

 service httpd restart

http://8.130.106.21/HappyBirthday/HappyBirthday.html

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

一、HTML页面 制作

1、更换 title

2、粒子 名字

3、粒子 颜色

4、设备 兼容

5、音乐 播放

二、阿里云部署

1、开放80端口

2、安装 httpd

3、启动 httpd

4、移动 httpd.conf

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

6、重启 hht pd

7、地址 访问

发表回复取消回复

一、HTML页面制作

1、更换title

2、粒子名字

3、粒子颜色

4、设备兼容

5、音乐播放

二、阿里云部署

1、开放80端口

2、安装httpd

3、启动httpd

4、移动httpd.conf

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

6、重启hhtpd

7、地址访问

相关文章

发表回复 取消回复