首页分享【程序员的浪漫】花式表白

【程序员的浪漫】花式表白

来源：花匠小妙招时间：2024-12-01 22:04

前言：520，七夕这些浪漫的节日你是否还在烦恼怎么过？表白不知如何下手？那就来看看这份浪漫的花式表白吧。

福利来了：下列分享表白六件套（5+1）的形式，表白的形式均以HTML实现，可以让没有编译器的女孩纸也能正常看到浪漫的效果。

花式表白五件套：

红心心动：

效果展示：

源码展示：

彩虹星海：

效果展示：

源码展示：

浪漫鲜花：

效果展示：

源码展示：

字幕爱心：

效果展示：

源码展示:

满屏爱心：

效果展示：

源码展示：

纪念照片墙二选一：

立体旋转照片墙：

效果展示：

源码展示：

3D立体旋转照片墙：

效果展示：

源码展示：

总结：

花式表白五件套：

红心心动：

效果展示：

提示：中间的爱心是不断在跳动的

源码展示：

<!DOCTYPE html>

<html>

<head>

<style>

margin: 0;

padding: 0;

}

body{

background: pink;

}

.box{

width: 120px;

height: 120px;

background: #ff0000;

transform: rotate(45deg);

margin: 200px auto;

animation: love 1s infinite;

box-shadow: 0 0 20px #ff5500;

}

.box::before,

.box::after{

content: "";

position: absolute;

width: 120px;

height: 120px;

background: #ff0000;

border-radius: 50%;

}

.box::before{

left: -68px;

}

.box::after{

top: -68px;

}

@keyframes love{

0%{

transform: rotate(45deg)scale(0.85);

}

50%{

transform: rotate(45deg)scale(1);

}

100%{

transform: rotate(45deg)scale(0.85);

}

text-align: center;

font-size: 30px;

font-weight: 520;

color: #ffaa00;

}

</style>

</head>

<body>

<p>Wish all the lovers a happy Chinese Valentine's Day!!!</p>

</body>

</html>

注解：head下title可自行定义，可以为你喜欢的女孩子专属定义哦，在body下也可以进行一些额外的个性设计，个性设计详情可以参考——> https://www.w3school.com.cn/

彩虹星海：

效果展示：

提示：鼠标放置在图案上时，彩虹星海会散开，用HTML的形式发给女生时，手机打开点击那里那里散开。

源码展示：

<!doctype html>

<html>

<head>

<style>

body {

overflow: hidden;

margin: 0;

padding: 0;

background: hsla(242, 30%, 5%, 1);

}

canvas {

width: 100%;

}

</style>

</head>

<body>

window.requestAnimFrame = (function () {

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function (callback) {

window.setTimeout(callback, 1000 / 60);

};

})();

window.addEventListener('load', start, false);

var c,

msX,

msY,

midX,

midY,

num = 650,

parts = [],

begin = 50,

repeat = 20,

end = Math.PI * 2,

force = null,

msdn = false;

function start() {

c = document.getElementById('canv');

$ = c.getContext('2d');

w = c.width = window.innerWidth;

h = c.height = window.innerHeight;

midX = w / 2;

midY = h / 2;

force = Math.max(w, h) * 0.09;

flow = begin;

window.requestAnimFrame(create);

run();

}

function run() {

window.requestAnimFrame(run);

go();

}

function Part() {

this.deg = 0;

this.rad = 0;

this.x = 0;

this.y = 0;

this.distX = 0;

this.distY = 0;

this.color = 'rgb(' + Math.floor(Math.random() * 130) + ',' + Math.floor(Math.random() * 50) + ',' + Math.floor(Math.random() * 100) + ')';

this.size;

}

function create() {

var n = num;

while (n--) {

var p = new Part();

p.deg = Math.floor(Math.random() * 360);

p.rad = Math.floor(Math.random() * w * 0.5);

p.x = p.distX = Math.floor(Math.random() * w);

p.y = p.distY = Math.floor(Math.random() * h);

p.size = 1 + Math.floor(Math.random() * (p.rad * 0.055));

parts[n] = p;

}

c.onmousemove = msmv;

c.onmousedown = msdn;

c.onmouseup = msup;

var int = setInterval(function () {

flow--;

if (flow === repeat) clearInterval(int);

}, 20);

}

function go() {

$.globalCompositeOperation = 'source-over';

$.fillStyle = 'hsla(242, 30%, 5%, .55)';

$.fillRect(0, 0, w, h);

$.globalCompositeOperation = 'lighter';

var mx = msX;

var my = msY;

var bounds = force;

if (msdn) {

bounds = force * 2;

}

var n = num;

while (n--) {

var p = parts[n];

var radi = Math.PI / 180 * p.deg;

p.distX = midX + p.rad * Math.cos(radi);

p.distY = midY + p.rad * Math.sin(radi) * 0.4;

if (mx && my) {

var react = Math.floor((bounds * 0.5) + Math.random() * (bounds * 0.9));

if (p.distX - mx > 0 &&

p.distX - mx < bounds &&

p.distY - my > 0 &&

p.distY - my < bounds) {

p.distX += react;

p.distY += react;

} else if (p.distX - mx > 0 &&

p.distX - mx < bounds &&

p.distY - my < 0 &&

p.distY - my > -bounds) {

p.distX += react;

p.distY -= react;

} else if (p.distX - mx < 0 &&

p.distX - mx > -bounds &&

p.distY - my > 0 &&

p.distY - my < bounds) {

p.distX -= react;

p.distY += react;

} else if (p.distX - mx < 0 &&

p.distX - mx > -bounds &&

p.distY - my < 0 &&

p.distY - my > -bounds) {

p.distY -= react;

}

p.x += ((p.distX - p.x) / flow);

p.y += ((p.distY - p.y) / flow);

var x = p.x;

var y = p.y;

var s = p.size * (p.y * 1.5 / h);

if (s < 0.1) {

s = 0;

}

$.beginPath();

$.fillStyle = p.color;

$.arc(x, y, s, 0, end, true);

$.fill();

$.closePath();

var vary;

if (p.size < 2) {

vary = 4;

} else if (p.size < 3) {

vary = 3;

} else if (p.size < 4) {

vary = 2;

} else {

vary = 1;

}

vary *= (p.y / (h * 0.9));

p.deg += vary;

p.deg = p.deg % 360;

}

function msmv(e) {

var p = getPos(e.target);

var sX = window.pageXOffset;

var sY = window.pageYOffset;

msX = e.clientX - p.x + sX;

msY = e.clientY - p.y + sY;

}

function msdn(e) {

msdn = true;

}

function msup(e) {

msdn = false;

}

function getPos(el) {

var cosmo = {};

cosmo.x = el.offsetLeft;

cosmo.y = el.offsetTop;

while (el.offsetParent) {

el = el.offsetParent;

cosmo.x += el.offsetLeft;

cosmo.y += el.offsetTop;

}

return cosmo;

}

</script>

</body>

</html>

浪漫鲜花：

效果展示：

提示：鲜花的生成式动态的，需要等待一会才能绘制完成，变成一个鲜艳的鲜花，大概需要1分钟左右

源码展示：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

.flower {

margin-left: 32%;

margin-top: 9%;

}

</style>

<body>

</body>

</html>

var b = document.body;

var c = document.getElementsByTagName('canvas')[0];

var a = c.getContext('2d');

document.body.clientWidth;

with (m = Math) C = cos, S = sin, P = pow, R = random; c.width = c.height = f = 600; h = -250; function p(a, b, c) { if (c > 60) return [S(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) - S(b) * 50, b * f + 50, 625 + C(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) + b * 400, a * 1 - b / 2, a]; A = a * 2 - 1; B = b * 2 - 1; if (A * A + B * B < 1) { if (c > 37) { n = (j = c & 1) ? 6 : 4; o = .5 / (a + .01) + C(b * 125) * 3 - a * 300; w = b * h; return [o * C(n) + w * S(n) + j * 610 - 390, o * S(n) - w * C(n) + 550 - j * 350, 1180 + C(B + A) * 99 - j * 300, .4 - a * .1 + P(1 - B * B, -h * 6) * .15 - a * b * .4 + C(a + b) / 5 + P(C((o * (a + 1) + (B > 0 ? w : -w)) / 25), 30) * .1 * (1 - B * B), o / 1e3 + .7 - o * w * 3e-6] } if (c > 32) { c = c * 1.16 - .15; o = a * 45 - 20; w = b * b * h; z = o * S(c) + w * C(c) + 620; return [o * C(c) - w * S(c), 28 + C(B * .5) * 99 - b * b * b * 60 - z / 2 - h, z, (b * b * .3 + P((1 - (A * A)), 7) * .15 + .3) * b, b * .7] } o = A * (2 - b) * (80 - c * 2); w = 99 - C(A) * 120 - C(b) * (-h - c * 4.9) + C(P(1 - b, 7)) * 50 + c * 2; z = o * S(c) + w * C(c) + 700; return [o * C(c) - w * S(c), B * 99 - C(P(b, 7)) * 50 - c / 3 - z / 1.35 + 450, z, (1 - b / 1.2) * .9 + a * .1, P((1 - b), 20) / 4 + .05] } } setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}', 0)

</script>

注解：head下title可自行定义，可以为你喜欢的女孩子专属定义哦，在body下也可以进行一些额外的个性设计，个性设计详情可以参考——> https://www.w3school.com.cn/

字幕爱心：

效果展示：

提示：字幕是在不断跳动中

源码展示:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body {

margin: 0;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background-color: black;

overflow: hidden;

}

.love {

width: 450px;

height: 450px;

position: relative;

}

.love span {

position: absolute;

left: 0;

color: goldenrod;

font-size: 20px;

font-family: sans-serif;

text-shadow: 0 0 1em white;

animation:

x-move 10s ease-in-out infinite alternate,

y-move 20s linear infinite;

animation-delay: calc(20s / var(--particles) * var(--n) * -1);

user-select: none;

}

.love span:first-child {

color: orangered;

font-size: 3em;

text-shadow:

0 0 0.1em black,

0 0 1em white;

z-index: 1;

}

@keyframes x-move {

to {

left: 450px;

}

@keyframes y-move {

0% { transform: translateY(180px); }

10% { transform: translateY(45px); }

15% { transform: translateY(5px); }

18% { transform: translateY(0); }

20% { transform: translateY(5px); }

22% { transform: translateY(35px); }

24% { transform: translateY(65px); }

25% { transform: translateY(110px); }

26% { transform: translateY(65px); }

28% { transform: translateY(35px); }

30% { transform: translateY(5px); }

32% { transform: translateY(0); }

35% { transform: translateY(5px); }

40% { transform: translateY(45px); }

50% { transform: translateY(180px); }

71% { transform: translateY(430px); }

72.5% { transform: translateY(440px); }

75% { transform: translateY(450px); }

77.5% { transform: translateY(440px); }

79% { transform: translateY(430px); }

100% { transform: translateY(180px); }

}

</style>

</head>

<body>

</body>

</html>

const words = [

'愛', 'Love', '你', '的', '名字',

'Amor', 'Любовь', 'الحب', 'प्यार', 'Cinta',

'Αγάπη', '사랑', 'Liefde', 'Dashuri', 'Каханне',

'Ljubav', 'Láska', 'Armastus', 'Mahal', 'אהבה',

'Szerelem', 'Grá', 'Mīlestība', 'Meilė', 'Любов',

'Љубовта', '特', '别', '的', '爱',

'给', '特', '别', '的', '她',

'小名', 'amà', 'amôr', 'kærleiki', 'mborayhu',

'Upendo', 'sòòyayyàà', 'ljubav', 'Սեր', 'сүю',

'сүйүү', 'tia', 'aroha', 'KHAIR', 'प्रेम',

'kjærlighet', 'munay', 'jecel', 'Kärlek', 'soymek',

'Mahal', 'ярату', 'محبت', 'sopp', 'uthando',

'ความรัก', '她', '的', '名字'];

d3.select('.love')

.style('--particles', words.length)

.selectAll('span')

.data(words)

.enter()

.append('span')

.style('--n', (d, i) => i + 1)

.text((d) => d);

</script>

注解：这个需要自己手动去设计，words字段需要自己去设计，除了爱和Love不能动，其他字段自己设计，根据自己的需求进行精心的定制设计。

满屏爱心：

效果展示：

提示：爱心是不断生成的，是动态的，这里推荐使用电脑打开，使用手机的话爱心的数量会偏少。

源码展示：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

var canvas = document.getElementById("cavs");

const WIDTH = window.innerWidth;

const HEIGHT = window.innerHeight;

canvas.setAttribute("width", WIDTH);

canvas.setAttribute("height", HEIGHT);

var context = canvas.getContext("2d");

var start =

{

loves: [],

DURATION: 30,

begin: function () {

this.createLove();

createLove: function () {

for (var i = 0; i < WIDTH / 59; i++) {

var love = new Love();

this.loves.push(love);

}

setInterval(this.drawLove.bind(this), this.DURATION);

drawLove: function () {

context.clearRect(0, 0, WIDTH, HEIGHT);

for (var key in this.loves) {

this.loves[key].draw();

}

function Love() {

var me = this;

function rand() {

me.attr.scale = (Math.random() * 0.8 + 0.3) * WIDTH / 521;

me.attr.x = Math.floor(Math.random() * WIDTH - 40);

me.attr.y = Math.floor(HEIGHT - Math.random() * 200);

me.attr.ColR = Math.floor(Math.random() * 255);

me.attr.ColG = Math.floor(Math.random() * 255);

me.attr.ColB = Math.floor(Math.random() * 255);

me.attr.alpha = Math.random() * 0.2 + 0.8;

me.attr.vector = Math.random() * 5 + 0.4;

}

(function () { me.attr = {}; rand(); }());

me.draw = function () {

if (me.attr.alpha < 0.01) rand();

x = me.attr.x;

y = me.attr.y;

scale = 4 * me.attr.scale;

context.beginPath();

context.bezierCurveTo(x + 2.5 * scale, y + 2.5 * scale, x + 2.0 * scale, y, x, y);

context.bezierCurveTo(x - 3.0 * scale, y, x - 3.0 * scale, y + 3.5 * scale, x - 3.0 * scale, y + 3.5 * scale);

context.bezierCurveTo(x - 3.0 * scale, y + 5.5 * scale, x - 1.0 * scale, y + 7.7 * scale, x + 2.5 * scale, y + 9.5 * scale);

context.bezierCurveTo(x + 6.0 * scale, y + 7.7 * scale, x + 8.0 * scale, y + 5.5 * scale, x + 8.0 * scale, y + 3.5 * scale);

context.bezierCurveTo(x + 8.0 * scale, y + 3.5 * scale, x + 8.0 * scale, y, x + 5.0 * scale, y);

context.bezierCurveTo(x + 3.5 * scale, y, x + 2.5 * scale, y + 2.5 * scale, x + 2.5 * scale, y + 2.5 * scale);

context.fillStyle = "rgba(" + me.attr.ColR + "," + me.attr.ColG + "," + me.attr.ColB + "," + me.attr.alpha + ")";

context.fill();

context.lineWidth = 0.5;

context.stroke();

me.attr.y -= me.attr.vector;

me.attr.alpha -= (me.attr.vector / 2.9 * 3.5 / HEIGHT);

}

window.onload = function () {

start.begin();

}

</script>

纪念照片墙二选一：

立体旋转照片墙：

效果展示：

提示：照片可以自行更换，使用你的小可爱的照片，这里采用的是网图。

源码展示：

<!DOCTYPE html>

<head>

<style>

body {

margin: 0px;

}

#div1 {

width: 100%;

height: 50px;

background: rgba(50, 161, 235, 0.966);

}

#div2 {

background-image: url(w3.jpeg);

position:fixed;

top: 0;

left: 0;

width:100%;

height:100%;

min-width: 1000px;

z-index:-10;

zoom: 1;

background-color: #fff;

background-repeat: no-repeat;

background-size: cover;

-webkit-background-size: cover;

-o-background-size: cover;

background-position: center 0;

}

#photo_box{

width: 280px;

height: 400px;

position: fixed;

left: 0;

right: 0;

top:0;

bottom: 0;

margin: 200px auto;

transform-style: preserve-3d;

transform: rotateX(-5deg) rotateY(0deg);

animation: run 30s linear infinite;

}

#photo_box img{

width: 250px;

height: 350px;

border: 5px solid #ccc;

border-radius: 5px;

position: absolute;

left: 0;

top: 0;

}

#photo_box img:nth-child(1){

transform: rotateY(0deg) translateZ(500px);

}

#photo_box img:nth-child(2){

transform: rotateY(60deg) translateZ(500px);

}

#photo_box img:nth-child(3){

transform: rotateY(120deg) translateZ(500px);

}

#photo_box img:nth-child(4){

transform: rotateY(180deg) translateZ(500px);

}

#photo_box img:nth-child(5){

transform: rotateY(240deg) translateZ(500px);

}

#photo_box img:nth-child(6){

transform: rotateY(300deg) translateZ(500px);

}

#photo_box img:nth-child(7){

transform: rotateY(360deg) translateZ(500px);

}

@keyframes run {

0%{transform: rotateX(0deg) rotateY(0deg);

}

25%{transform: rotateX(10deg) rotateY(90deg);

}

50%{transform: rotateX(0deg) rotateY(180deg);

}

75%{transform: rotateX(-10deg) rotateY(270deg);

}

100%{transform: rotateX(0deg) rotateY(360deg);

}

#text1 {

float: left;

color:#fff;

width: 150px;

padding:12px 0;

height: 50px;

}

#text2 {

float: right;

width: 100px;

color:#fff;

padding:12px 0;

height: 50px;

}

#text3 {

float: right;

width: 100px;

color:#fff;

padding:12px 0;

height: 50px;

}

</style>

</head>

<body>

<div id="text1"">自定义吧少年！</div>

<div id="text3">么么哒（也可以自定义）</div>

</div>

</div>

let mp3 = '小虎队 - 爱 (Remix).mp3'

let audio = new Audio(mp3)

audio.autoplay

audio.play()

}

</body>

</html>

注解：照片是可以无限制添加的，这里示范只用了7张，在 /*依次设置图像盒子中每个图像旋转后位置*/中对transform: rotateY（？deg）红色？进行修改，角度设置从0开始，360结束，让中间每个图片角度相差相同即可，下面需要几张设计几个，调整角度差距，同时在 <div id="photo_box">字段中添加img字段，注意，这里你要想你的小可爱看到，需要使用链接的形式，你需要的图片可以上传到你的QQ相册里面，再用电脑打开复制连接，将连接传入src字段即可。若有不懂可以联系笔者。

3D立体旋转照片墙：

效果展示：

提示：这个效果不好演示，图片需要自己添加自己演示，效果还是很好的，非常推荐，这里一堆有纪念意义的，非常好看。笔者推荐！！！

源码展示：

<!DOCTYPE html>

<head>

<title>我的照片墙</title>

* {

margin: 0;

padding: 0;

}

body {

background: #222;

overflow: hidden;

user-select: none;

}

@keyframes rotate {

100% {

transform: rotateY(360deg);

}

.perspective {

perspective: 600px;

}

.wrap {

width: 135px;

height: 240px;

margin: 100px auto;

position: relative;

transform: rotateX(-20deg) rotateY(0deg);

transform-style: preserve-3d;

}

.wrap img {

display: block;

position: absolute;

width: 100%;

height: 100%;

transform: rotateY(0deg) translateZ(0px);

background: transparent;

box-shadow: 0 0 4px #fff;

border-radius: 5px;

}

.wrap p {

width: 1200px;

height: 1200px;

background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));

position: absolute;

border-radius: 50%;

left: 50%;

top: 100%;

margin-left: -600px;

margin-top: -600px;

transform: rotateX(90deg);

}

</style>

</head>

<body>

</div>

<p></p>

</div>

let mp3 = '小虎队 - 爱 (Remix).mp3'

let audio = new Audio(mp3)

audio.autoplay

audio.play()

var oImg = document.getElementsByClassName('f1')

var oImg2 = document.getElementsByClassName('f2')

var oImg3 = document.getElementsByClassName('f3')

var len = oImg.length;

console.log(len)

var deg = 360 / len;

var oWrap = document.getElementById("imgwrap");

window.onload = function() {

Array.prototype.forEach.call(oImg, function(ele, index, self) {

ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";

ele.style.transition = "1s " + (len - index) * 0.1 + "s";

});

Array.prototype.forEach.call(oImg2, function(ele, index, self) {

ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";

ele.style.transition = "1s " + (len - index) * 0.1 + "s";

});

Array.prototype.forEach.call(oImg3, function(ele, index, self) {

ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(480px)";

ele.style.transition = "1s " + (len - index) * 0.1 + "s";

});

}

var newX, newY, lastX, lastY, minusX, minusY, rotX = -20,

rotY = 0;

document.onmousedown = function(e) {

lastX = e.clientX;

lastY = e.clientY;

this.onmousemove = function(e) {

newX = e.clientX;

newY = e.clientY;

minusX = newX - lastX;

minusY = newY - lastY;

rotX -= minusY * 0.2;

rotY += minusX * 0.1;

oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";

lastX = newX;

lastY = newY;

}

this.onmouseup = function(e) {

this.onmousemove = null;

}

</script>

</body>

</html>

注解：图片推荐使用链接的形式，虽然内置也可以，但是只有自己能看，转成连接的形式，所有人都能看，下面的mp3音乐可以播放，如果能找到音乐链接的话就可以在所有地方播放了，笔者没有找到，所以采用的是本地地址，需要把音乐和HTML文件放到一个文件夹里，要想你的小可爱也能听到，需要将文件夹打压成压缩包发送给你的小可爱。

总结：

采用5+1的形式送给你心仪的人，凑齐六件套，66大顺，会让你的那个她开心一整天，加油吧程序员们，大胆追求你的爱情吧！！！最后，学习也不要拉下哦，这里笔者给小伙伴们准备了学习网站总结大礼包，希望小伙伴爱情学习双丰收哦。学习网站连接：https://blog.csdn.net/yushaoyyds/article/details/126063944?spm=1001.2014.3001.5502