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

2023-07-25 16:17| 来源: 网络整理| 查看: 265

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

直接上源码吧

一.红色爱心 1.效果

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

2.源码

复制粘贴即可运行哦

DOCTYPE html> Title *{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; } } I Love You 二.粉色爱心 1.效果

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

2.源码

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

💗致亲爱的X女士

代码太长，只粘贴部分哦

doctype html> canvas爱心 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; } 💗致亲爱的X女士三.粉色爱心+科技流动文字 1.效果

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

2.源码

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

💗致亲爱的X女士

代码太长，只粘贴部分哦

DOCTYPE html> Love~L body { margin: 0; padding: 0; overflow: hidden; } 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 //让背景逐渐由透明到不透明 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[i] = 0; } drops[i]++; } } setInterval(draw, 33); DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> love 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; } 四.粉色爱心+科技流动文字 1.效果

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

2.源码

复制粘贴即可运行哦

doctype html> 情人节爱心背景 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; } } 情人节快乐！ 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 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 requestAnimationFrame(render); hearts.push(new Heart()) ctx.clearRect(0, 0, ww, wh); for (var i = 0; i hearts.splice(i, 1); i--; } } } onResize(); window.addEventListener("mousemove", onMove); window.addEventListener("touchmove", onMove); window.addEventListener("resize", onResize); requestAnimationFrame(render);

完整的源码下载链接：https://download.csdn.net/download/qq_43030934/87431822

【本文地址】

公司简介

联系我们