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

2024-02-21 01:59
文章标签 代码 程序 展示 浪漫 立马 我爱你

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

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

关注李哥不迷路，代码让你上高速！！！
汉语词汇，拼音是à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>

在这里插入代码片

这篇关于立马对她说我爱你，代码浪漫展示程序狗浪漫的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/730247。

相关文章

利用Python调试串口的示例代码

利用Python调试串口的示例代码

《利用Python调试串口的示例代码》在嵌入式开发、物联网设备调试过程中,串口通信是最基础的调试手段本文将带你用Python+ttkbootstrap打造一款高颜值、多功能的串口调试助手,需要的可以了... 目录概述：为什么需要专业的串口调试工具项目架构设计1.1 技术栈选型1.2 关键类说明1.3 线程模
阅读更多...
Python Transformers库(NLP处理库)案例代码讲解

Python Transformers库(NLP处理库)案例代码讲解

《PythonTransformers库(NLP处理库)案例代码讲解》本文介绍transformers库的全面讲解,包含基础知识、高级用法、案例代码及学习路径,内容经过组织,适合不同阶段的学习者,对... 目录一、基础知识1. Transformers 库简介2. 安装与环境配置3. 快速上手示例二、核心模
阅读更多...
Java的栈与队列实现代码解析

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念（Stack）栈的实现代码队列（Queue）模拟实现队列(双链表实现)循环队列（循环数组
阅读更多...
将Java程序打包成EXE文件的实现方式

将Java程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》：本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4
阅读更多...
Java程序进程起来了但是不打印日志的原因分析

Java程序进程起来了但是不打印日志的原因分析

《Java程序进程起来了但是不打印日志的原因分析》：本文主要介绍Java程序进程起来了但是不打印日志的原因分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java程序进程起来了但是不打印日志的原因1、日志配置问题2、日志文件权限问题3、日志文件路径问题4、程序
阅读更多...
使用Java将DOCX文档解析为Markdown文档的代码实现

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown（MD）因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析
阅读更多...
C++使用printf语句实现进制转换的示例代码

C++使用printf语句实现进制转换的示例代码

《C++使用printf语句实现进制转换的示例代码》在C语言中,printf函数可以直接实现部分进制转换功能,通过格式说明符（formatspecifier）快速输出不同进制的数值,下面给大家分享C+... 目录一、printf 原生支持的进制转换1. 十进制、八进制、十六进制转换2. 显示进制前缀3. 指
阅读更多...
使用Python实现全能手机虚拟键盘的示例代码

使用Python实现全能手机虚拟键盘的示例代码

《使用Python实现全能手机虚拟键盘的示例代码》在数字化办公时代,你是否遇到过这样的场景：会议室投影电脑突然键盘失灵、躺在沙发上想远程控制书房电脑、或者需要给长辈远程协助操作？今天我要分享的Pyth... 目录一、项目概述：不止于键盘的远程控制方案1.1 创新价值1.2 技术栈全景二、需求实现步骤一、需求
阅读更多...
Java中Date、LocalDate、LocalDateTime、LocalTime、时间戳之间的相互转换代码

Java中Date、LocalDate、LocalDateTime、LocalTime、时间戳之间的相互转换代码

《Java中Date、LocalDate、LocalDateTime、LocalTime、时间戳之间的相互转换代码》：本文主要介绍Java中日期时间转换的多种方法,包括将Date转换为LocalD... 目录一、Date转LocalDateTime二、Date转LocalDate三、LocalDateTim
阅读更多...
SpringBoot实现微信小程序支付功能

SpringBoot实现微信小程序支付功能

《SpringBoot实现微信小程序支付功能》小程序支付功能已成为众多应用的核心需求之一,本文主要介绍了SpringBoot实现微信小程序支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录一、引言二、准备工作（一）微信支付商户平台配置（二）Spring Boot项目搭建（三）配置文件
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2