立马对她说我爱你，代码浪漫展示程序狗浪漫

本文主要是介绍立马对她说我爱你，代码浪漫展示程序狗浪漫，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

还在问别人你为什么没有女朋友？立马对她说我爱你，程序狗的浪漫展示

关注李哥不迷路，代码让你上高速！！！
汉语词汇，拼音是ài qíng，是指两个有情个体之间相互爱慕的感情、情谊；也指爱的感情。 [1] 两个个体之间相互产生的情感，所体验到的快乐，幸福感。
程序猿同胞们经常被叫做“直男”（对此我们十分气愤）
于是，我们准备制造一些浪漫，给女朋友的专属惊喜
在这里插入图片描述

1. 文字表白 + 雪花动态效果
**1.1 html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>520，我爱你</title></head><body><p class="words">****年**月**日，是我第一次遇见你。天也欢喜，地也欢喜，人也欢喜，欢喜你遇见了我，我也遇见了你。偷偷在草稿纸上写你名字的人是我，下雪时偷偷在雪地里写你名字的是我，对反光镜哈气写你名字的是我，为了和你偶遇不惜绕路的是我，想为你瘦下来的是我，可是不知道的是你。余生我只想和你看雪看星星看月亮，从诗词歌赋谈到人生理想。明月照回湖心，野鹤奔向闲云，而我慢慢步入你。</p ><div class="img-con">< img src="gf.jpg" /></div></body>
</html>
***1.2CSS部分***
style>
* {margin: 0;padding: 0;list-style: none;
}body {height: 100vh;background: radial-gradient(ellipse at bottom,#1b2735 0, #090a0f 100%);filter: drop-shadow(0 0 10px white);position: relative;overflow: hidden;
}.snow {width: 10px;height: 10px;border-radius: 50%;background-color: #fff;position: absolute;
}
.words
{position: fixed;left: 50%;top:30%;transform: translate(-50%,-50%);color: #fff;font-size: 1.5em;line-height: 2em;font-weight: 500;display: flex;flex-wrap: wrap;width: 1000px;}
.img-con{width: 100%;height: 200px;text-align: center;position: fixed;top: 50%;display: none;
}
.img-con > img{width: 300px;
}
.words  span{animation: jumpin 0.5s ease-out both;}
@keyframes jumpin {from{transform: translateY(-20%);opacity: 0;}to{transform: translateY(0);opacity: 1;}
}
</style>
**1.3 JS文件**
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>$(function () {var words=$(".words").text().split("");// 查看文字console.log(words);$(".words").empty();words.forEach((w,i)=>{// 属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。$(`<span>${w}</span>`).css({"animation-delay": 0.1*i+'s'}).appendTo($(".words"));});for(var i=0;i<200;i++){var x=Math.random()*100;var y=Math.random()*100;// 大于0 小于1的随机数console.log(scale)var scale=Math.random();var opacity=Math.random();var t1=Math.random()*20+10;var t2=Math.random()*30;var o=Math.random()*20-10;var x1=x+o;var x2=x+o/2;// 随机数产生雪花 以及大小$(`<style> @keyframes fall${i} {${y}%{transform: translate(${x1}vw, ${y}vh) scale(${scale});}to{transform: translate(${x2}vw,100vh) scale(${scale});}}</style>`).appendTo($("head"));$('<div class="snow"></div>').css({"transform": `translate(${x}vw, -10px) scale(${scale})`,"opacity": opacity,"animation": `fall${i} ${t1}s -${t2}s linear infinite`}).appendTo($("body")).end()setTimeout(()=>{$(".img-con").fadeIn(2000);},23000)}})
</script>

canvas 绘制爱心穿云箭
在这里插入图片描述
代码如下

<!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%;}</style>
</head><body><canvas id="pinkboard"></canvas><script>/** Settings*/var settings = {particles: {length: 500, // 最大颗粒量duration: 2, // 过渡时间velocity: 100, // 粒子速度effect: -0.75, // 效果控制size: 30, // 像素大小},};/** 多边形填充*/(function () { var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) { window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"] } if (!window.requestAnimationFrame) { window.requestAnimationFrame = 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) } } }());/** 点的样式设置*/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);this.normalize();this.x *= length;this.y *= length;return this;};Point.prototype.normalize = function () {var length = this.length();this.x /= length;this.y /= length;return this;};return Point;})();/** 粒子类*/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;})();/** 字幕*/var ParticlePool = (function () {var particles,firstActive = 0,firstFree = 0,duration = settings.particles.duration;function ParticlePool(length) {// 创建和填充粒子池particles = 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);// 处理循环队列firstFree++;if (firstFree == particles.length) firstFree = 0;if (firstActive == firstFree) firstActive++;if (firstActive == particles.length) firstActive = 0;};ParticlePool.prototype.update = function (deltaTime) {var i;// 更新活动粒子if (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);}// 删除活动粒子while (particles[firstActive].age >= duration && firstActive != firstFree) {firstActive++;if (firstActive == particles.length) firstActive = 0;}};ParticlePool.prototype.draw = function (context, image) {// 画出粒子if (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;})();/** 把它们放在一起*/(function (canvas) {var context = canvas.getContext('2d'),particles = new ParticlePool(settings.particles.length),particleRate = settings.particles.length / settings.particles.duration, // particles/sectime;// 重点放在心图案上function pointOnHeart(t) {return new Point(160 * Math.pow(Math.sin(t), 3),130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25);}// 使用虚拟画布创建粒子图像var image = (function () {var canvas = document.createElement('canvas'),context = canvas.getContext('2d');canvas.width = settings.particles.size;canvas.height = settings.particles.size;// 创建路径的助手函数function 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;}// 创建开始路径context.beginPath();var t = -Math.PI;var point = to(t);context.moveTo(point.x, point.y);while (t < Math.PI) {t += 0.01; // 时间+1point = to(t);context.lineTo(point.x, point.y);}context.closePath();context.fillStyle = 'red';context.fill();// 创建图片var image = new Image();image.src = canvas.toDataURL();return image;})();function render() {// 执行动画requestAnimationFrame(render);// 更新时间var newTime = new Date().getTime() / 1000,deltaTime = newTime - (time || newTime);time = newTime;// 清除画布context.clearRect(0, 0, canvas.width, canvas.height);// 创建新粒子var 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);}// 重新调整画布的大小function onResize() {canvas.width = canvas.clientWidth;canvas.height = canvas.clientHeight;}window.onresize = onResize;// 定时器延时setTimeout(function () {onResize();render();}, 10);})(document.getElementById('pinkboard'));</script></body></html>

效果展示（让网页动态展示~）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字蒙版效果实现</title><style>*{margin: 0;padding: 0;list-style: none;}body{height: 100vh;position: relative;}img,h1{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}img{/* 最佳最完美的居中自动剪裁图片的功能 */object-fit: cover;}h1{font-size: 20vw;text-align: center;line-height: 100vh;/* 取值为screen时，背景色将作为源的补差色混合在一起 */mix-blend-mode: screen;background-color: #fff;}</style>
</head>
<body><img src="flower.gif" alt=""><h1>我爱你</h1>
</body>
</html>

文字渐显
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本效果</title><style>* {margin: 0;padding: 0;list-style: none;}body {background-color: #0f0f0f;height: 100vh;display: flex;justify-content: center;align-items: center;}.mywords {color: #fff;font-size: 1.5em;line-height: 1.8em;margin: 0 1em;}.mywords span {animation: lightin 0.8s both;}/* from 0% */@keyframes lightin {from {opacity: 0;}65% {opacity: 1;text-shadow: 0 0 20px #fff;}75% {opacity: 1;}to {opacity: 0.7;}}</style>
</head><body><p class="mywords">喜欢一个人是藏不住的，即使嘴巴不说，也会从眼睛里跑出来。我喜欢你，认真且怂，从一而终。</br></p><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(function(){var words=$(".mywords").text().split("");$(".mywords").empty();words.forEach((w,i)=>{$(`<span>${w}</span>`).css({"animation-delay": 0.05*i+'s'}).appendTo($(".mywords"));})})</script>
</body></html>

在这里插入代码片