|
|
代码如下 已经增加注释
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表白</title>
<style>
canvas {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .2);
}
#child {
position: fixed;
top: 52%;
left: 50%;
margin-top: -75px;
margin-left: -100px;
z-index: 100;
}
h4 {
font-family: "STKaiti";
font-size: 40px;
color: #f584b7;
position: relative;
top: -70px;
left: -65px;
}
</style>
</head>
<body>
<div id="child"><h4>💗You And Me💗</h4></div>
<canvas id="heart" width="1920" height="947"></canvas>
<script>
window.requestAnimationFrame = window.requestAnimationFrame || function (callback) {
setTimeout(callback, 1000 / 60);
};
var canvas = document.getElementById('heart');
var ctx = canvas.getContext('2d');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
function heartShape(t) {
return [
Math.pow(Math.sin(t), 3),
-(15 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t))
];
}
function drawHeart() {
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "rgba(255,0,0,1)";
for (var i = 0; i < Math.PI * 2; i += 0.01) {
var pos = heartShape(i);
ctx.fillRect(width / 2 + pos[0] * 200, height / 2 + pos[1] * 200, 5, 5);
}
requestAnimationFrame(drawHeart);
}
drawHeart();
</script>
<audio autoplay loop preload="auto" id="music" controls>
<source src="pianai.mp3" type="audio/ogg">
<source src="pianai.mp3" type="audio/mpeg">
</audio>
</body>
</html>
关键代码修改
修改名字：在 <div id="child"><h4>💗You And Me💗</h4></div> 中替换 You And Me 为你想要的名字。 修改背景音乐：将 <source src="pianai.mp3" type="audio/ogg"> 和 <source src="pianai.mp3" type="audio/mpeg"> 中的 pianai.mp3 替换为你喜欢的音乐文件12。
这些代码可以帮助你创建一个浪漫的表白网页，适用于各种特殊场合，如情人节、生日等。
|
|
|Archiver|手机版|小黑屋|小酒馆
( 备案号:黑ICP备 2024033165号 )
发表于 2025-2-7 19:38:59