点击蓝字
关注我们
FOCUS ON US
PART1
写在前面
前言
在浩瀚的网络世界中，总有一些小惊喜能触动我们的心弦。今天，就让我们用 HTML 语言，探索既神秘又浪漫的 李峋同款跳动的爱心代码 吧。
爱心
首先，让我们一起来欣赏一下这个跳动的爱心代码所带来的视觉效果。 当这段代码被嵌入到你的网页中时，一个由无数小圆点组成的爱心形状会开始在屏幕上跳动。 这些小圆点如同爱情的精灵，在屏幕上翩翩起舞，让人仿佛置身于一个梦幻般的爱情世界。
视频效果
PART2
跳动的爱心
如何实现
那么，这个跳动的爱心代码是如何实现的呢？其实，它主要利用了HTML的
<canvas>
元素和JavaScript的绘图功能。通过绘制大量的小圆点，并让它们按照一定的规律进行移动和变化，就能够模拟出爱心跳动的视觉效果。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Love</title>
<style>
body {
filter: blur(0.5px);
background: #000;
}
canvas {
display: block;
margin: 0 auto;
}
h1 {
color: white;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-weight: 400;
}
</style>
</head>
<body>
<!-- <h1><i>Love</i></h1> -->
<canvas id="heart"></canvas>
</body>
</html>
<script>
var canvas = document.getElementById("heart");
canvas.width = 600;
canvas.height = 600;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";
var context = canvas.getContext("2d");
context.translate(canvas.width / 2, canvas.height / 2);
context.scale(1, -1);
context.moveTo(0, 0);
context.fillStyle = 'deeppink'
function xin(t, r, j, ws) {
this.trans = t;
this.rs = r,
this.ws = ws,
this.index = j,
this.x = this.trans * this.ws * Math.sin(this.index) * Math.sin(this.index) * Math.sin(this.index)
this.y = this.trans * (16 * Math.cos(this.index) - 5 * Math.cos(2 * this.index) - 2 * Math.cos(3 * this.index) - Math.cos(4 * this.index));
}
let ws = 18;
let hs = 16;
let wsSpeed = 1;
let hsSpeed = 1;
let speed = 1;
let wqs = [];
let nqs = [];
let hxz = [];
let hxz2 = [];
let dc = [];
let xings = [wqs, nqs, hxz, hxz2, dc];
sdata();
function sdata() {
// 外圈
for (let j = 0; j < 500; j += speed) {
let trans = 9 + Math.random() * 2.5;
let size = Math.random() * 2;
let xins = new xin(trans, size, j, ws);
wqs.push(xins);
}
// 内圈
for (let j = 0; j < 300; j += speed) {
let trans = 7 + Math.random() * 5;
let size = Math.random() * 2.5;
let xins = new xin(trans, size, j, ws);
nqs.push(xins);
}
// 核心轴
for (let j = 0; j < 600; j += speed) {
let trans = 11 + Math.random() * 2;
let size = Math.random() * 3.5;
let xins = new xin(trans, size, j, ws);
hxz.push(xins);
}
// 核心轴2
for (let j = 0; j < 500; j += speed) {
let trans = 0 + Math.random() * 2.7;
let size = Math.random() * 2.5;
let xins = new xin(trans, size, j, ws);
hxz2.push(xins);
}
setInterval(() => {
context.clearRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
ws += wsSpeed;
if (ws < 16) {
wsSpeed *= -1;
} else if (ws > 18) {
wsSpeed *= -1;
}
hs += hsSpeed;
if (hs < 14) {
hsSpeed *= -1;
} else if (hs > 16) {
hsSpeed *= -1;
}
hxz.forEach(v => {
context.beginPath();
context.arc(v.trans * ws * Math.sin(v.index) * Math.sin(v.index) * Math.sin(v.index), v.trans * (hs * Math.cos(v.index) - 5 * Math.cos(2 * v.index) - 2 * Math.cos(3 * v.index) - Math.cos(4 * v.index)), v.rs, 0, Math.PI * 2);
context.fill();
context.stroke();
context.closePath();
});
hxz2.forEach(v => {
context.beginPath();
context.arc(v.trans * ws * Math.sin(v.index) * Math.sin(v.index) * Math.sin(v.index), v.trans * (hs * Math.cos(v.index) - 5 * Math.cos(2 * v.index) - 2 * Math.cos(3 * v.index) - Math.cos(4 * v.index)), v.rs, 0, Math.PI * 2);
context.fill();
context.stroke();
context.closePath();
});
nqs.forEach(v => {
context.beginPath();
context.arc(v.trans * ws * Math.sin(v.index) * Math.sin(v.index) * Math.sin(v.index), v.trans * (hs * Math.cos(v.index) - 5 * Math.cos(2 * v.index) - 2 * Math.cos(3 * v.index) - Math.cos(4 * v.index)), v.rs, 0, Math.PI * 2);
context.fill();
context.stroke();
context.closePath();
});
wqs.forEach(v => {
context.beginPath();
context.arc(v.trans * ws * Math.sin(v.index) * Math.sin(v.index) * Math.sin(v.index), v.trans * (hs * Math.cos(v.index) - 5 * Math.cos(2 * v.index) - 2 * Math.cos(3 * v.index) - Math.cos(4 * v.index)), v.rs, 0, Math.PI * 2);
context.fill();
context.stroke();
context.closePath();
});
dc = [];
// 顶层
for (let j = 0; j < 300; j += speed) {
let trans = 1 + Math.random() * 20;
let size = Math.random() * 2;
let xins = new xin(trans, size, j, ws);
dc.push(xins);
}
dc.forEach(v => {
context.beginPath();
context.arc(v.x, v.y, v.rs, 0, Math.PI * 2);
context.fill();
context.stroke();
context.closePath();
});
}, 100);
}
</script>
<!--音乐代码-->
<audio autoplay="autoplay" loop="loop" preload="auto" src="https://link.hhtjim.com/163/1860578400.mp3"></audio>
</body>
</html>
代码分析
在这个代码中，我们定义了多个数组来存储小圆点的位置、大小和颜色等信息。然后，使用setInterval()函数周期性地更新这些小圆点的位置，从而实现了跳动的动画效果。同时，我们还通过调整一些参数来控制爱心的大小、速度和颜色等属性，让你可以根据自己的喜好来定制这个跳动的爱心。小编偷偷告诉你， 在代码的第33行可以留下你想写的字哦 ~
运行效果
情感表达
当然，这个跳动的爱心代码并不仅仅是一个简单的视觉效果展示，它还可以被用作一种情感表达的方式。无论是向你的爱人表达爱意，还是向你的访客传递温暖，这个代码都能起到很好的作用，它能够让你的网页变得更加温馨和浪漫，让你的访客在浏览的同时也能感受到你的用心和关怀。
商业能力
最后，值得一提的是，这个跳动的爱心代码不仅仅适用于个人博客或网站，它还可以被用于各种商业场合，如电商平台的促销页面、企业官网的欢迎页面等。运用这个代码，你可以为你的网页增添一份独特的魅力，吸引更多的访客并提升他们的留存率。
其他
总之，李峋同款跳动的爱心代码是一个既实用又有趣的HTML代码，它不仅能够为你的网页增添一份浪漫的气息，还能够提升用户体验和吸引更多的访客。如果你也想让你的网页变得更加有趣和温馨，不妨尝试一下这个跳动的爱心代码吧！
PART3
写在后面
系列推荐
个人主页
最后想说
我是一只有趣的兔子，感谢你的喜欢！