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