当前位置：首页 > news >正文

HTML浪漫动态表白代码+音乐(附源码)

news 2025/7/8 10:22:24

HTML浪漫表白求爱(附源码)，内含4款浪漫的表白源码，可用于520，情人节，生日，求爱场景，下载直接使用。

直接上源码吧

一.红色爱心

1.效果

实际效果是动态的哦
在这里插入图片描述

2.源码

复制粘贴即可运行哦

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="Keywords" content="关键字,关键词"><meta name="Description" content="描述和简介"><title>Title</title><style type="text/css">*{margin:0;padding:0;}body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}a{text-decoration:none;color: inherit;}img{display: block;border:none;}ol,ul{list-style:none;}.clearfix:after {content: "";display: block;clear: both;}.fl{ float: left;}.fr{ float: right;}html{height: 100%;background: -webkit-radial-gradient(center,#153170,#000);}.heart{ position: relative; width: 300px; height: 300px; margin: 200px auto;transform: rotate(45deg);animation: move 2s infinite alternate ;}.heart div{ position: absolute; width: 200px; height: 200px; background: red;}.heart .middle{ right: 0; bottom: 0; width: 200px; height: 200px;}.heart .left{ left: 0; bottom: 0; border-radius: 50%;}.heart .right{ top: 0; right: 0;border-radius: 50%;}.heart p{ width: 200px; height: 30px; font: bold 25px/30px "";text-align:center; color: #fff;}.heart p{ position: absolute; right: 0; bottom: 85px; transform: rotate(-45deg);}@-webkit-keyframes move{10%{ transform: rotate(45deg) scale(1.1); text-shadow: 0 0 5px #fff; }20%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }30%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }40%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }50%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }60%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }70%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }80%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 10px #fff;}90%{ transform: rotate(45deg) scale(1.1); text-shadow: 0 0 5px #fff; }}</style>
</head>
<body><div class="heart"><div class="left"></div><div class="middle"></div><div class="right"></div><p>I Love You</p></div>
</body>
</html>

二.粉色爱心

1.效果

实际效果是动态的哦
在这里插入图片描述

2.源码

文字部分只需改这一块即可哦

<div id="child"><h4>💗致亲爱的X女士</h4></div><!--这里写名字❤！！！-->

代码太长，只粘贴部分哦

<!doctype html>
<html>
<head><meta charset="utf-8"><title>canvas爱心</title><style>html, body {height: 100%;padding: 0;margin: 0;background: #000;}canvas {position: absolute;width: 100%;height: 100%;}#child {position: fixed;top: 50%;left: 50%;margin-top: -75px;margin-left: -100px;}h4 {font-family: "STKaiti";font-size: 40px;color: #f584b7;position: relative;top: -70px;left: -65px;}</style>
</head>
<body>
<div id="child"><h4>💗致亲爱的X女士</h4></div><!--这里写名字❤！！！-->
<canvas id="pinkboard"></canvas>

三.粉色爱心+科技流动文字

1.效果

实际效果是动态的哦
在这里插入图片描述

2.源码

文字部分只需改这一块即可哦

<div id="child"><h4>💗致亲爱的X女士</h4></div><!--这里写名字❤！！！-->

代码太长，只粘贴部分哦

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>Love~L</title>
</head>
<body>
<canvas id="canvas"></canvas>
<style type="text/css">body {margin: 0;padding: 0;overflow: hidden;}
</style>
<script type="text/javascript">var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');canvas.height = window.innerHeight;canvas.width = window.innerWidth;var texts = 'I LOVE U'.split('');var fontSize = 16;var columns = canvas.width / fontSize;// 用于计算输出文字时坐标，所以长度即为列数var drops = [];//初始值for (var x = 0; x < columns; x++) {drops[x] = 1;}function draw() {//让背景逐渐由透明到不透明ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';ctx.fillRect(0, 0, canvas.width, canvas.height);//文字颜色ctx.fillStyle = '#f584b7';ctx.font = fontSize + 'px arial';//逐行输出文字for (var i = 0; i < drops.length; i++) {var text = texts[Math.floor(Math.random() * texts.length)];ctx.fillText(text, i * fontSize, drops[i] * fontSize);if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) {drops[i] = 0;}drops[i]++;}}setInterval(draw, 33);
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE> love</TITLE><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><meta charset="UTF-8"><style>html, body {height: 100%;padding: 0;margin: 0;background: rgb(0, 0, 0);}canvas {position: absolute;width: 100%;height: 100%;}#child {position: absolute;left: 50%;top: 48%;transform: translate(-50%, -50%);}h4 {font-family: "STKaiti";font-size: 40px;color: #f584b7;position: relative;}</style>
</head>
<body>

四.粉色爱心+科技流动文字

1.效果

实际效果是动态的哦
在这里插入图片描述

2.源码

复制粘贴即可运行哦

<!doctype html>
<html>
<head><meta charset="utf-8"><title>情人节爱心背景</title><style>body {overflow: hidden;margin: 0;}h1 {position: fixed;top: 40%;left: 0;width: 100%;text-align: center;transform: translateY(-50%);font-family: 'Love Ya Like A Sister', cursive;font-size: 40px;color: #c70012;padding: 0 20px;}@media (min-width: 1200px) {h1 {font-size: 100px;}}</style></head>
<body><canvas></canvas>
<h1>情人节快乐！</h1><script>var canvas = document.querySelector("canvas"),ctx = canvas.getContext("2d");var ww, wh;function onResize() {ww = canvas.width = window.innerWidth;wh = canvas.height = window.innerHeight;}ctx.strokeStyle = "red";ctx.shadowBlur = 25;ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";var precision = 100;var hearts = [];var mouseMoved = false;function onMove(e) {mouseMoved = true;if (e.type === "touchmove") {hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));} else {hearts.push(new Heart(e.clientX, e.clientY));hearts.push(new Heart(e.clientX, e.clientY));}}var Heart = function (x, y) {this.x = x || Math.random() * ww;this.y = y || Math.random() * wh;this.size = Math.random() * 2 + 1;this.shadowBlur = Math.random() * 10;this.speedX = (Math.random() + 0.2 - 0.6) * 8;this.speedY = (Math.random() + 0.2 - 0.6) * 8;this.speedSize = Math.random() * 0.05 + 0.01;this.opacity = 1;this.vertices = [];for (var i = 0; i < precision; i++) {var step = (i / precision - 0.5) * (Math.PI * 2);var vector = {x: (15 * Math.pow(Math.sin(step), 3)),y: -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))}this.vertices.push(vector);}}Heart.prototype.draw = function () {this.size -= this.speedSize;this.x += this.speedX;this.y += this.speedY;ctx.save();ctx.translate(-1000, this.y);ctx.scale(this.size, this.size);ctx.beginPath();for (var i = 0; i < precision; i++) {var vector = this.vertices[i];ctx.lineTo(vector.x, vector.y);}ctx.globalAlpha = this.size;ctx.shadowBlur = Math.round((3 - this.size) * 10);ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";ctx.shadowOffsetX = this.x + 1000;ctx.globalCompositeOperation = "screen"ctx.closePath();ctx.fill()ctx.restore();};function render(a) {requestAnimationFrame(render);hearts.push(new Heart())ctx.clearRect(0, 0, ww, wh);for (var i = 0; i < hearts.length; i++) {hearts[i].draw();if (hearts[i].size <= 0) {hearts.splice(i, 1);i--;}}}onResize();window.addEventListener("mousemove", onMove);window.addEventListener("touchmove", onMove);window.addEventListener("resize", onResize);requestAnimationFrame(render);
</script></body>
</html>

完整的源码下载链接：

HTML浪漫动态表白代码+音乐(附源码)

HTML浪漫表白求爱(附源码)，内含4款浪漫的表白源码，可用于520，情人节，生日，求爱场景，下载直接使用。直接上源码吧一.红色爱心 1.效果实际效果是动态的哦 2.源码复制粘贴即可运行哦 <!DOCTYPE…...

编程日记 2023/2/10 6:29:37

The last packet sent successfully to the server was 0 milliseconds ago. 解决办法

mybatis-generator-maven-plugin插件The last packet sent successfully to the server was 0 milliseconds agoYou must configure either the server or JDBC driver (via the serverTimezone configuration property) to use a more specifc time zone value if you want to…...

编程日记 2023/2/10 6:28:28

HTML浪漫表白求爱(附源码)，内含4款浪漫的表白源码，可用于520，情人节，生日，求爱场景，下载直接使用。

一.红色爱心

1.效果

2.源码

二.粉色爱心

1.效果

2.源码

三.粉色爱心+科技流动文字

1.效果

2.源码

四.粉色爱心+科技流动文字

1.效果

2.源码

相关文章：