七夕马上就要到了，为了帮助大家高效表白，下面再给大家加几款实用的HTML浪漫表白代码(附源码)+背景音乐，可用于520，情人节，生日，求爱表白等场景，可直接使用。
来吧，展示！
修改名字
<div id="child"><h4>💗You And Me💗</h4></div><!--这里写名字❤！！！-->
修改背景音乐，只要把音乐地址修改即可，可与当前目录相同
<audio autoplay="autoplay" loop="loop" preload="auto" id="music" controls><source src="pianai.mp3" type="audio/ogg"><source src="pianai.mp3" type="audio/mpeg">
</audio>
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; 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&questAnimationFrame =window.__requestAnimationFrame ||questAnimationFrame ||window.webkitRequestAnimationFrame ||RequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||(function () {return function (callback, element) {var lastTime = element.__lastTime;if (lastTime === undefined) {lastTime = 0;}var currTime = w();var timeToCall = Math.max(1, 33 - (currTime - lastTime));window.setTimeout(callback, timeToCall);element.__lastTime = currTime + timeToCall;};})();window.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera st(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase()));var loaded = false;var init = function () {if (loaded) return;loaded = true;var mobile = window.isDevice;var koef = mobile ? 0.5 : 1;var canvas = ElementById('heart');var ctx = Context('2d');var width = canvas.width = koef * innerWidth;var height = canvas.height = koef * innerHeight;var rand = Math.random;ctx.fillStyle = "rgba(0,0,0,1)";ctx.fillRect(0, 0, width, height);var heartPosition = function (rad) {//return [Math.sin(rad), s(rad)];return [Math.pow(Math.sin(rad), 3), -(15 * s(rad) - 5 * s(2 * rad) - 2 * s(3 * rad) - s(4 * rad))];};var scaleAndTranslate = function (pos, sx, sy, dx, dy) {return [dx + pos[0] * sx, dy + pos[1] * sy];};window.addEventListener('resize', function () {width = canvas.width = koef * innerWidth;height = canvas.height = koef * innerHeight;ctx.fillStyle = "rgba(0,0,0,1)";ctx.fillRect(0, 0, width, height);});var traceCount = mobile ? 20 : 50;var pointsOrigin = [];var i;var dr = mobile ? 0.3 : 0.1;for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0));for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0));for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0));var heartPointsCount = pointsOrigin.length;var targetPoints = [];var pulse = function (kx, ky) {for (i = 0; i < pointsOrigin.length; i++) {targetPoints[i] = [];targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2;targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2;}};var e = [];for (i = 0; i < heartPointsCount; i++) {var x = rand() * width;var y = rand() * height;e[i] = {vx: 0,vy: 0,R: 2,speed: rand() + 5,q: ~~(rand() * heartPointsCount),D: 2 * (i % 2) - 1,force: 0.2 * rand() + 0.7,f: "hsla(0," + ~~(40 * rand() + 60) + "%," + ~~(60 * rand() + 20) + "%,.3)",trace: []};for (var k = 0; k < traceCount; k++) e[i].trace[k] = {x: x, y: y};}var config = {traceK: 0.4,timeDelta: 0.01};var time = 0;var loop = function () {var n = -s(time);pulse((1 + n) * .5, (1 + n) * .5);time += ((Math.sin(time)) < 0 ? 9 : (n > 0.8) ? .2 : 1) * config.timeDelta;ctx.fillStyle = "rgba(0,0,0,.1)";ctx.fillRect(0, 0, width, height);for (i = e.length; i--;) {var u = e[i];var q = targetPoints[u.q];var dx = u.trace[0].x - q[0];var dy = u.trace[0].y - q[1];var length = Math.sqrt(dx * dx + dy * dy);if (10 > length) {if (0.95 < rand()) {u.q = ~~(rand() * heartPointsCount);} else {if (0.99 < rand()) {u.D *= -1;}u.q += u.D;u.q %= heartPointsCount;if (0 > u.q) {u.q += heartPointsCount;}}}u.vx += -dx / length * u.speed;u.vy += -dy / length * u.ace[0].x += u.ace[0].y += u.vy;u.vx *= u.force;u.vy *= u.force;for (k = 0; k < u.trace.length - 1;) {var T = u.trace[k];var N = u.trace[++k];N.x -= aceK * (N.x - T.x);N.y -= aceK * (N.y - T.y);}ctx.fillStyle = u.f;for (k = 0; k < u.trace.length; k++) {ctx.ace[k].x, u.trace[k].y, 1, 1);}}ctx.fillStyle = "rgba(255,255,255,1)";for (i = u.trace.length + 13; i--;) ctx.fillRect(targetPoints[i][0], targetPoints[i][1], 2, 2);questAnimationFrame(loop, canvas);};loop();};var s = adyState;if (s === 'complete' || s === 'loaded' || s === 'interactive') init();else document.addEventListener('DOMContentLoaded', init, false);
</script>
<audio autoplay="autoplay" loop="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><!--这里写名字❤！！！-->
修改背景音乐，只要把音乐地址修改即可，可与当前目录相同
<audio autoplay="autoplay" loop="loop" preload="auto" id="music" controls><source src="daughtersLove.mp3" type="audio/ogg"><source src="daughtersLove.mp3" type="audio/mpeg">
</audio>
<!doctype html>
<html>
<head><meta charset="utf-8"><title>❤永远开心❤</title><style>html, body {margin: 0px;width: 100%;height: 100%;overflow: hidden;background: #000;}#canvas {width: 100%;height: 100%;}html, body {height: 100%;padding: 0;margin: 0;background: #000;}canvas {position: absolute;width: 100%;height: 100%;}#child {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}h4 {font-family: "STKaiti";font-size: 40px;color: #f584b7;position: relative;}</style>
</head>
<body>
<div id="child"><h4>💗you and me💗</h4></div><!--这里写名字❤！！！-->
<canvas id="pinkboard"></canvas><script>/** Settings*/var settings = {particles: {length: 500, // maximum amount of particlesduration: 2, // particle duration in secvelocity: 100, // particle velocity in pixels/seceffect: -0.75, // play with this for a nice effectsize: 30, // particle size in pixels},};/** RequestAnimationFrame polyfill by Erik M?ller*/(function () {var b = 0;var c = ["ms", "moz", "webkit", "o"];for (var a = 0; a < c.length && !questAnimationFrame; ++a) {questAnimationFrame = window[c[a] + "RequestAnimationFrame"];window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"]}if (!questAnimationFrame) {questAnimationFrame = function (h, e) {var d = new Date().getTime();var f = Math.max(0, 16 - (d - b));var g = window.setTimeout(function () {h(d + f)}, f);b = d + f;return g}}if (!window.cancelAnimationFrame) {window.cancelAnimationFrame = function (d) {clearTimeout(d)}}}());/** Point class*/var Point = (function () {function Point(x, y) {this.x = (typeof x !== 'undefined') ? x : 0;this.y = (typeof y !== 'undefined') ? y : 0;}Point.prototype.clone = function () {return new Point(this.x, this.y);};Point.prototype.length = function (length) {if (typeof length == 'undefined')return Math.sqrt(this.x * this.x + this.y * this.y);alize();this.x *= length;this.y *= length;return this;};alize = function () {var length = this.length();this.x /= length;this.y /= length;return this;};return Point;})();/** Particle class*/var Particle = (function () {function Particle() {this.position = new Point();this.velocity = new Point();this.acceleration = new Point();this.age = 0;}Particle.prototype.initialize = function (x, y, dx, dy) {this.position.x = x;this.position.y = y;this.velocity.x = dx;this.velocity.y = dy;this.acceleration.x = dx * settings.particles.effect;this.acceleration.y = dy * settings.particles.effect;this.age = 0;};Particle.prototype.update = function (deltaTime) {this.position.x += this.velocity.x * deltaTime;this.position.y += this.velocity.y * deltaTime;this.velocity.x += this.acceleration.x * deltaTime;this.velocity.y += this.acceleration.y * deltaTime;this.age += deltaTime;};Particle.prototype.draw = function (context, image) {function ease(t) {return (--t) * t * t + 1;}var size = image.width * ease(this.age / settings.particles.duration);context.globalAlpha = 1 - this.age / settings.particles.duration;// context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);};return Particle;})();/** ParticlePool class*/var ParticlePool = (function () {var particles,firstActive = 0,firstFree = 0,duration = settings.particles.duration;function ParticlePool(length) {// create and populate particle poolparticles = new Array(length);for (var i = 0; i < particles.length; i++)particles[i] = new Particle();}ParticlePool.prototype.add = function (x, y, dx, dy) {particles[firstFree].initialize(x, y, dx, dy);// handle circular queuefirstFree++;if (firstFree == particles.length) firstFree = 0;if (firstActive == firstFree) firstActive++;if (firstActive == particles.length) firstActive = 0;};ParticlePool.prototype.update = function (deltaTime) {var i;// update active particlesif (firstActive < firstFree) {for (i = firstActive; i < firstFree; i++)particles[i].update(deltaTime);}if (firstFree < firstActive) {for (i = firstActive; i < particles.length; i++)particles[i].update(deltaTime);for (i = 0; i < firstFree; i++)particles[i].update(deltaTime);}// remove inactive particleswhile (particles[firstActive].age >= duration && firstActive != firstFree) {firstActive++;if (firstActive == particles.length) firstActive = 0;}};ParticlePool.prototype.draw = function (context, image) {// draw active particlesif (firstActive < firstFree) {for (i = firstActive; i < firstFree; i++)particles[i].draw(context, image);}if (firstFree < firstActive) {for (i = firstActive; i < particles.length; i++)particles[i].draw(context, image);for (i = 0; i < firstFree; i++)particles[i].draw(context, image);}};return ParticlePool;})();/** Putting it all together*/(function (canvas) {var context = Context('2d'),particles = new ParticlePool(settings.particles.length),particleRate = settings.particles.length / settings.particles.duration, // particles/sectime;// get point on heart with -PI <= t <= PIfunction pointOnHeart(t) {return new Point(160 * Math.pow(Math.sin(t), 3),130 * s(t) - 50 * s(2 * t) - 20 * s(3 * t) - 10 * s(4 * t) + 25);}// creating the particle image using a dummy canvasvar image = (function () {var canvas = ateElement('canvas'),context = Context('2d');canvas.width = settings.particles.size;canvas.height = settings.particles.size;// helper function to create the pathfunction to(t) {var point = pointOnHeart(t);point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;return point;}// create the pathcontext.beginPath();var t = -Math.PI;var point = to(t);veTo(point.x, point.y);while (t < Math.PI) {t += 0.01; // baby steps!point = to(t);context.lineTo(point.x, point.y);}context.closePath();// create the fillcontext.fillStyle = '#ea80b0';context.fill();// create the imagevar image = new Image();image.src = DataURL();return image;})();// render that thing!function render() {// next animation framerequestAnimationFrame(render);// update timevar newTime = new Date().getTime() / 1000,deltaTime = newTime - (time || newTime);time = newTime;// clear canvascontext.clearRect(0, 0, canvas.width, canvas.height);// create new particlesvar amount = particleRate * deltaTime;for (var i = 0; i < amount; i++) {var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());var dir = pos.clone().length(settings.particles.velocity);particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);}// update and draw particlesparticles.update(deltaTime);particles.draw(context, image);}// handle (re-)sizing of the canvasfunction onResize() {canvas.width = canvas.clientWidth;canvas.height = canvas.clientHeight;}size = onResize;// delay rendering bootstrapsetTimeout(function () {onResize();render();}, 10);})(ElementById('pinkboard'));</script>
<canvas id="canvas"></canvas>
<script>function initVars() {pi = Math.PI;ctx = Context("2d");canvas.width = canvas.clientWidth;canvas.height = canvas.clientHeight;cx = canvas.width / 2;cy = canvas.height / 2;playerZ = -25;playerX = playerY = playerVX = playerVY = playerVZ = pitch = yaw = pitchV = yawV = 0;scale = 600;seedTimer = 0;seedInterval = 5, seedLife = 100;gravity = .02;seeds = new Array();sparkPics = new Array();s = "/";for (i = 1; i <= 10; ++i) {sparkPic = new Image();sparkPic.src = s + "spark" + i + ".png";sparkPics.push(sparkPic);}sparks = new Array();pow1 = new Audio(s + &#");pow2 = new Audio(s + &#");pow3 = new Audio(s + &#");pow4 = new Audio(s + &#");frames = 0;}function rasterizePoint(x, y, z) {var p, d;x -= playerX;y -= playerY;z -= playerZ;p = Math.atan2(x, z);d = Math.sqrt(x * x + z * z);x = Math.sin(p - yaw) * d;z = s(p - yaw) * d;p = Math.atan2(y, z);d = Math.sqrt(y * y + z * z);y = Math.sin(p - pitch) * d;z = s(p - pitch) * d;var rx1 = -1000, ry1 = 1, rx2 = 1000, ry2 = 1, rx3 = 0, ry3 = 0, rx4 = x, ry4 = z,uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1);if (!uc) return {x: 0, y: 0, d: -1};var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc;var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc;if (!z) z = .000000001;if (ua > 0 && ua < 1 && ub > 0 && ub < 1) {return {x: cx + (rx1 + ua * (rx2 - rx1)) * scale,y: cy + y / z * scale,d: Math.sqrt(x * x + y * y + z * z)};} else {return {x: cx + (rx1 + ua * (rx2 - rx1)) * scale,y: cy + y / z * scale,d: -1};}}function spawnSeed() {seed = new Object();seed.x = -50 + Math.random() * 100;seed.y = 25;seed.z = -50 + Math.random() * 100;seed.vx = .1 - Math.random() * .2;seed.vy = -1.5;//*(1+Math.random()/2);seed.vz = .1 - Math.random() * .2;seed.born = frames;seeds.push(seed);}function splode(x, y, z) {t = 5 + parseInt(Math.random() * 150);sparkV = 1 + Math.random() * 2.5;type = parseInt(Math.random() * 3);switch (type) {case 0:pic1 = parseInt(Math.random() * 10);break;case 1:pic1 = parseInt(Math.random() * 10);do {pic2 = parseInt(Math.random() * 10);} while (pic2 == pic1);break;case 2:pic1 = parseInt(Math.random() * 10);do {pic2 = parseInt(Math.random() * 10);} while (pic2 == pic1);do {pic3 = parseInt(Math.random() * 10);} while (pic3 == pic1 || pic3 == pic2);break;}for (m = 1; m < t; ++m) {spark = new Object();spark.x = x;spark.y = y;spark.z = z;p1 = pi * 2 * Math.random();p2 = pi * Math.random();v = sparkV * (1 + Math.random() / 6)spark.vx = Math.sin(p1) * Math.sin(p2) * v;spark.vz = s(p1) * Math.sin(p2) * v;spark.vy = s(p2) * v;switch (type) {case 0:spark.img = sparkPics[pic1];break;case 1:spark.img = sparkPics[parseInt(Math.random() * 2) ? pic1 : pic2];break;case 2:switch (parseInt(Math.random() * 3)) {case 0:spark.img = sparkPics[pic1];break;case 1:spark.img = sparkPics[pic2];break;case 2:spark.img = sparkPics[pic3];break;}break;}spark.radius = 25 + Math.random() * 50;spark.alpha = ail = new Array();sparks.push(spark);}switch (parseInt(Math.random() * 4)) {case 0:pow = new Audio(s + &#");break;case 1:pow = new Audio(s + &#");break;case 2:pow = new Audio(s + &#");break;case 3:pow = new Audio(s + &#");break;}d = Math.sqrt((x - playerX) * (x - playerX) + (y - playerY) * (y - playerY) + (z - playerZ) * (z - playerZ));pow.volume = 1.5 / (1 + d / 10);pow.play();}function doLogic() {if (seedTimer < frames) {seedTimer = frames + seedInterval * Math.random() * 10;spawnSeed();}for (i = 0; i < seeds.length; ++i) {seeds[i].vy += gravity;seeds[i].x += seeds[i].vx;seeds[i].y += seeds[i].vy;seeds[i].z += seeds[i].vz;if (frames - seeds[i].born > seedLife) {splode(seeds[i].x, seeds[i].y, seeds[i].z);seeds.splice(i, 1);}}for (i = 0; i < sparks.length; ++i) {if (sparks[i].alpha > 0 && sparks[i].radius > 5) {sparks[i].alpha -= .01;sparks[i].radius /= 1.02;sparks[i].vy += gravity;point = new Object();point.x = sparks[i].x;point.y = sparks[i].y;point.z = sparks[i].z;if (sparks[i].trail.length) {x = sparks[i].trail[sparks[i].trail.length - 1].x;y = sparks[i].trail[sparks[i].trail.length - 1].y;z = sparks[i].trail[sparks[i].trail.length - 1].z;d = ((point.x - x) * (point.x - x) + (point.y - y) * (point.y - y) + (point.z - z) * (point.z - z));if (d > 9) {sparks[i].trail.push(point);}} else {sparks[i].trail.push(point);}if (sparks[i].trail.length > 5) sparks[i].trail.splice(0, 1);sparks[i].x += sparks[i].vx;sparks[i].y += sparks[i].vy;sparks[i].z += sparks[i].vz;sparks[i].vx /= 1.075;sparks[i].vy /= 1.075;sparks[i].vz /= 1.075;} else {sparks.splice(i, 1);}}p = Math.atan2(playerX, playerZ);d = Math.sqrt(playerX * playerX + playerZ * playerZ);d += Math.sin(frames / 80) / 1.25;t = Math.sin(frames / 200) / 40;playerX = Math.sin(p + t) * d;playerZ = s(p + t) * d;yaw = pi + p + t;}function rgb(col) {var r = parseInt((.5 + Math.sin(col) * .5) * 16);var g = parseInt((.5 + s(col) * .5) * 16);var b = parseInt((.5 - Math.sin(col) * .5) * 16);return "#" + r.toString(16) + g.toString(16) + b.toString(16);}function draw() {ctx.clearRect(0, 0, cx * 2, cy * 2);ctx.fillStyle = "#ff8";for (i = -100; i < 100; i += 3) {for (j = -100; j < 100; j += 4) {x = i;z = j;y = 25;point = rasterizePoint(x, y, z);if (point.d != -1) {size = 250 / (1 + point.d);d = Math.sqrt(x * x + z * z);a = 0.75 - Math.pow(d / 100, 6) * 0.75;if (a > 0) {ctx.globalAlpha = a;ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);}}}}ctx.globalAlpha = 1;for (i = 0; i < seeds.length; ++i) {point = rasterizePoint(seeds[i].x, seeds[i].y, seeds[i].z);if (point.d != -1) {size = 200 / (1 + point.d);ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);}}point1 = new Object();for (i = 0; i < sparks.length; ++i) {point = rasterizePoint(sparks[i].x, sparks[i].y, sparks[i].z);if (point.d != -1) {size = sparks[i].radius * 200 / (1 + point.d);if (sparks[i].alpha < 0) sparks[i].alpha = 0;if (sparks[i].trail.length) {point1.x = point.x;point1.y = point.y;switch (sparks[i].img) {case sparkPics[0]:ctx.strokeStyle = "#f84";break;case sparkPics[1]:ctx.strokeStyle = "#84f";break;case sparkPics[2]:ctx.strokeStyle = "#8ff";break;case sparkPics[3]:ctx.strokeStyle = "#fff";break;case sparkPics[4]:ctx.strokeStyle = "#4f8";break;case sparkPics[5]:ctx.strokeStyle = "#f44";break;case sparkPics[6]:ctx.strokeStyle = "#f84";break;case sparkPics[7]:ctx.strokeStyle = "#84f";break;case sparkPics[8]:ctx.strokeStyle = "#fff";break;case sparkPics[9]:ctx.strokeStyle = "#44f";break;}for (j = sparks[i].trail.length - 1; j >= 0; --j) {point2 = rasterizePoint(sparks[i].trail[j].x, sparks[i].trail[j].y, sparks[i].trail[j].z);if (point2.d != -1) {ctx.globalAlpha = j / sparks[i].trail.length * sparks[i].alpha / 2;ctx.beginPath();veTo(point1.x, point1.y);ctx.lineWidth = 1 + sparks[i].radius * 10 / (sparks[i].trail.length - j) / (1 + point2.d);ctx.lineTo(point2.x, point2.y);ctx.stroke();point1.x = point2.x;point1.y = point2.y;}}}ctx.globalAlpha = sparks[i].alpha;// ctx.drawImage(sparks[i].img, point.x - size / 2, point.y - size / 2, size, size);}}}function frame() {if (frames > 100000) {seedTimer = 0;frames = 0;}frames++;draw();doLogic();requestAnimationFrame(frame);}window.addEventListener("resize", () => {canvas.width = canvas.clientWidth;canvas.height = canvas.clientHeight;cx = canvas.width / 2;cy = canvas.height / 2;});initVars();frame();</script><audio autoplay="autoplay" loop="loop" preload="auto" id="music" controls><source src="daughtersLove.mp3" type="audio/ogg"><source src="daughtersLove.mp3" type="audio/mpeg">
</audio>
</body>
</html>
修改名字
var loverName = "💗刘亦菲💗" // 需要更改的名字
修改背景音乐，只要把音乐地址修改即可，可与当前目录相同
<audio autoplay="autoplay" loop="loop" preload="auto" id="music" controls><source src="pianai.mp3" type="audio/ogg"><source src="pianai.mp3" type="audio/mpeg">
</audio>
完整源码
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>💗 Love you 💗 My Dear XXX💗</title><style type="text/css">body {margin: 0;overflow: hidden;background: #000;}canvas {position: absolute;width: 100%;height: 100%;}#pinkboard {animation: anim 1.5s ease-in-out infinite;-webkit-animation: anim 1.5s ease-in-out infinite;-o-animation: anim 1.5s ease-in-out infinite;-moz-animation: anim 1.5s ease-in-out infinite;}@keyframes anim {0% {transform: scale(0.8);}25% {transform: scale(0.7);}50% {transform: scale(1);}75% {transform: scale(0.7);}100% {transform: scale(0.8);}}@-webkit-keyframes anim {0% {-webkit-transform: scale(0.8);}25% {-webkit-transform: scale(0.7);}50% {-webkit-transform: scale(1);}75% {-webkit-transform: scale(0.7);}100% {-webkit-transform: scale(0.8);}}@-o-keyframes anim {0% {-o-transform: scale(0.8);}25% {-o-transform: scale(0.7);}50% {-o-transform: scale(1);}75% {-o-transform: scale(0.7);}100% {-o-transform: scale(0.8);}}@-moz-keyframes anim {0% {-moz-transform: scale(0.8);}25% {-moz-transform: scale(0.7);}50% {-moz-transform: scale(1);}75% {-moz-transform: scale(0.7);}100% {-moz-transform: scale(0.8);}}#name {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);margin-top: -20px;font-size: 46px;color: #ea80b0;}</style>
</head>
<body>
<canvas id="pinkboard" width="1920" height="947"></canvas>
<canvas id="canvas" width="1920" height="947"></canvas></body>
</html>
这里的代码太长了就不完整的贴出来了，已上传对应的资源，需要的可以前往下载哦！
下载链接：
另外附上其他的告白HTML网页版的链接：
1.HTML浪漫动态表白代码+音乐(附源码)（一）
2.HTML浪漫动态表白代码绚烂星空烟花+粉色大爱心+3D旋转相册+音乐(附源码)（三）
希望可以帮助到你，还请不要吝啬你的三连哦！
本文发布于:2024-02-02 12:11:19，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170684707943709.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
