<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>heartLove</title>
<link rel="shortcut icon" href="https://s10.aconvert.com/convert/p3r68-cdx67/a5fmg-k3nhq-001.ico" type="image/x-icon">
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
* {
padding: 0;
margin: 0;
}
body {
background: #000;
background-size: cover;
height: 100vh;
}
body::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100vh;
-webkit-background-color: rgba(0, 0, 0, .5);//黑色半透明
background-color: rgba(0, 0, 0, .5);
}
audio,
.love_you {
position: absolute;
left: 50%;
top: 1.5rem;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 1809185784;
}
.love_you {
top: 45%;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 1.3rem;
font-weight: bold;
color: #ffc0cb;
letter-spacing: .05rem;
-moz-animation: love-xf 1.2s alternate ease-in-out;
-webkit-animation: love-xf 1.2s alternate ease-in-out;
animation: love-xf 1.2s alternate ease-in-out;
user-select: none;
-webkit-text-shadow: 0 0 8px #fff;
text-shadow: 0 0 8px #fff;
}
#lovexf {
position: absolute;
width: 100%;
height: 100%;
z-index: 520;
}
@keyframes love-xf {
0% {
opacity: 0.08;
filter: blur(8px);
letter-spacing: .1rem;
}
100% {
opacity: 1;
filter: blur(0);
letter-spacing: .05rem;
}
}
</style>
</head>
<body>
<!-- 这里修改名字 -->
<p class="love_you" align="center">XXX<br>星辰大海</p>
<!-- 这里替换音乐 -->
<audio id="music" src="xcdh.mp3" autoplay loop="false" autostart></audio>
<canvas id="lovexf"></canvas>
<script src="https://player.xfyun.club/love-wuminjun/love.click.js"></script>
<script>
var settings = {
particles: {
length: 500, // maximum amount of particles
duration: 2, // particle duration in sec
velocity: 100, // particle velocity in pixels/sec
effect: -0.6, // play with this for a nice effect
size: 28, // particle size in pixels
},
};
(function () {
var b = 0; var c = ["ms", "moz", "webkit", "o"];
for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a)
{ window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"];
window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] ||
window[c[a] + "CancelRequestAnimationFrame"] } if (!window.requestAnimationFrame)
{ window.requestAnimationFrame = function (h, e)
{ var d = new Date().getTime(); var f = Math.max(0, 16 - (d - b));
var g = window.setTimeout(function () { h(d + f) }, f); b = d + f; return g } }
if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function (d) { clearTimeout(d) } }
}());
/*
* Point class
*/
var Point = (function () {
function Point(x, y) {
this.x = (typeof x !== 'undefined') ? x : 0;
this.y = (typeof y !== 'undefined') ? y : 0;
}
Point.prototype.clone = function () {
return new Point(this.x, this.y);
};
Point.prototype.length = function (length) {
if (typeof length == 'undefined')
return Math.sqrt(this.x * this.x + this.y * this.y);
this.normalize();
this.x *= length;
this.y *= length;
return this;
};
Point.prototype.normalize = function () {
var length = this.length();
this.x /= length;
this.y /= length;
return this;
};
return Point;
})();
/*
* Particle class
*/
var Particle = (function () {
function Particle() {
this.position = new Point();
this.velocity = new Point();
this.acceleration = new Point();
this.age = 0;
}
Particle.prototype.initialize = function (x, y, dx, dy) {
this.position.x = x;
this.position.y = y;
this.velocity.x = dx;
this.velocity.y = dy;
this.acceleration.x = dx * settings.particles.effect;
this.acceleration.y = dy * settings.particles.effect;
this.age = 0;
};
Particle.prototype.update = function (deltaTime) {
this.position.x += this.velocity.x * deltaTime;
this.position.y += this.velocity.y * deltaTime;
this.velocity.x += this.acceleration.x * deltaTime;
this.velocity.y += this.acceleration.y * deltaTime;
this.age += deltaTime;
};
Particle.prototype.draw = function (context, image) {
function ease(t) {
return (--t) * t * t + 1;
}
var size = image.width * ease(this.age / settings.particles.duration);
context.globalAlpha = 1 - this.age / settings.particles.duration;
context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
};
return Particle;
})();
/*
* ParticlePool class
*/
var ParticlePool = (function () {
var particles,
firstActive = 0,
firstFree = 0,
duration = settings.particles.duration;
function ParticlePool(length) {
// create and populate particle pool
particles = new Array(length);
for (var i = 0; i < particles.length; i++)
particles[i] = new Particle();
}
ParticlePool.prototype.add = function (x, y, dx, dy) {
particles[firstFree].initialize(x, y, dx, dy);
// handle circular queue
firstFree++;
if (firstFree == particles.length) firstFree = 0;
if (firstActive == firstFree) firstActive++;
if (firstActive == particles.length) firstActive = 0;
};
ParticlePool.prototype.update = function (deltaTime) {
var i;
// update active particles
if (firstActive < firstFree) {
for (i = firstActive; i < firstFree; i++)
particles[i].update(deltaTime);
}
if (firstFree < firstActive) {
for (i = firstActive; i < particles.length; i++)
particles[i].update(deltaTime);
for (i = 0; i < firstFree; i++)
particles[i].update(deltaTime);
}
// remove inactive particles
while (particles[firstActive].age >= duration && firstActive != firstFree) {
firstActive++;
if (firstActive == particles.length) firstActive = 0;
}
};
ParticlePool.prototype.draw = function (context, image) {
// draw active particles
if (firstActive < firstFree) {
for (i = firstActive; i < firstFree; i++)
particles[i].draw(context, image);
}
if (firstFree < firstActive) {
for (i = firstActive; i < particles.length; i++
动态网页爱心源码，支持修改文字和音乐
需积分: 8 36 浏览量
2022-12-02
19:59:08
上传
评论
收藏 10.19MB ZIP 举报
dyHeartLove.zip （47个子文件） 
dyHeartLove 
pom.xml 575B laojie.mp3 4.87MB .git index 823B hooks fsmonitor-watchman.sample 5KB pre-push.sample 1KB prepare-commit-msg.sample 1KB pre-merge-commit.sample 416B applypatch-msg.sample 478B pre-commit.sample 2KB pre-receive.sample 544B pre-applypatch.sample 424B commit-msg.sample 896B pre-rebase.sample 5KB update.sample 4KB post-update.sample 189B push-to-checkout.sample 3KB config 311B description 73B refs tags heads master 41B remotes origin master 41B logs refs heads master 143B remotes origin master 138B HEAD 143B objects 46 2cfe225d0a7b68935256acd26d5f9f756a2ffb 306B 4b 661a5ffc3c46924b456f0eac25ea4c6e9b4047 296B 07 7a80003bc81a6122b6e17f0092ee9c0f117d68 4KB 37 813fbf223ed969199a4865a262d71008fc80dd 287B 51 5b03de9c5c2a35c7095bf24056482a12c4a6e0 184B e9 9ccb83031909f64c5ac04bd14492b8c4833795 167B b0 798bb53b53ecd1b4ccde41aeda0d2f66897edd 4.84MB ac e08399d753d2059ab6d2ec0c21eaff5b254938 187B info pack 78 b2cc53b203f0b97534bb1184cdc7b474339fb4 88B 5a 2f139ce25c6f225e0cb5fb199704f51273de00 307B 7b 5b912c154f6228e574340e59634ad96a3cb276 118B 94 a25f7f4cb416c083d265558da75d457237d671 155B info exclude 240B COMMIT_EDITMSG 2B HEAD 23B
dyHeartLove.html 12KB .idea misc.xml 526B jarRepositories.xml 880B vcs.xml 185B compiler.xml 544B workspace.xml 4KB .gitignore 225B xcdh.mp3 502KB dyHeartLove.iml 81B
评论0
最新资源