HTML浪漫动态表白代码+音乐(附源码)（一）
前言
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>Titletitle>
<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 Youp>
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~Ltitle>
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> loveTITLE>
<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>
完整的源码下载链接：https://download.csdn.net/download/qq_43030934/87431822
想要其他更多的效果，请前往以下链接:
1.HTML浪漫动态表白代码+音乐(附源码)（二）
2.HTML浪漫动态表白代码绚烂星空烟花+粉色大爱心+3D旋转相册+音乐(附源码)（三）
希望可以帮助到你，还请不要吝啬你的三连哦！