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

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。

相关文章

利用c++判断水仙花数并输出示例代码

利用c++判断水仙花数并输出示例代码

《利用c++判断水仙花数并输出示例代码》水仙花数是指一个三位数,其各位数字的立方和恰好等于该数本身,：本文主要介绍利用c++判断水仙花数并输出的相关资料,文中通过代码介绍的非常详细,需要的朋友可以... 以下是使用C++实现的相同逻辑代码：#include <IOStream>#include <vec
阅读更多...
Django调用外部Python程序的完整项目实战

Django调用外部Python程序的完整项目实战

《Django调用外部Python程序的完整项目实战》Django是一个强大的PythonWeb框架,它的设计理念简洁优雅,：本文主要介绍Django调用外部Python程序的完整项目实战,文中通... 目录一、为什么 Django 需要调用外部 python 程序二、三种常见的调用方式方式 1：直接 im
阅读更多...
Java 接口定义变量的示例代码

Java 接口定义变量的示例代码

《Java接口定义变量的示例代码》文章介绍了Java接口中的变量和方法,接口中的变量必须是publicstaticfinal的,用于定义常量,而方法默认是publicabstract的,必须由实现类... 在 Java 中，接口是一种抽象类型，用于定义类必须实现的方法。接口可以包含常量和方法，但不能包含实例
阅读更多...
使用Redis实现会话管理的示例代码

使用Redis实现会话管理的示例代码

《使用Redis实现会话管理的示例代码》文章介绍了如何使用Redis实现会话管理,包括会话的创建、读取、更新和删除操作,通过设置会话超时时间并重置,可以确保会话在用户持续活动期间不会过期,此外,展示了... 目录1. 会话管理的基本概念2. 使用Redis实现会话管理2.1 引入依赖2.2 会话管理基本操作
阅读更多...
mybatis-plus分表实现案例(附示例代码)

mybatis-plus分表实现案例(附示例代码)

《mybatis-plus分表实现案例(附示例代码)》MyBatis-Plus是一个MyBatis的增强工具,在MyBatis的基础上只做增强不做改变,为简化开发、提高效率而生,：本文主要介绍my... 目录文档说明数据库水平分表思路1. 为什么要水平分表2. 核心设计要点3.基于数据库水平分表注意事项示例
阅读更多...
Nginx服务器部署详细代码实例

Nginx服务器部署详细代码实例

《Nginx服务器部署详细代码实例》Nginx是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务,：本文主要介绍Nginx服务器部署的相关资料,文中通过代码... 目录Nginx 服务器SSL/TLS 配置动态脚本反向代理总结Nginx 服务器Nginx是一个‌高性
阅读更多...
HTML5的input标签的`type`属性值详解和代码示例

HTML5的input标签的`type`属性值详解和代码示例

《HTML5的input标签的`type`属性值详解和代码示例》HTML5的`input`标签提供了多种`type`属性值,用于创建不同类型的输入控件,满足用户输入的多样化需求,从文本输入、密码输入、... 目录一、引言二、文本类输入类型2.1 text2.2 password2.3 textarea（严格
阅读更多...
JAVA项目swing转javafx语法规则以及示例代码

JAVA项目swing转javafx语法规则以及示例代码

《JAVA项目swing转javafx语法规则以及示例代码》：本文主要介绍JAVA项目swing转javafx语法规则以及示例代码的相关资料,文中详细讲解了主类继承、窗口创建、布局管理、控件替换、... 目录最常用的“一行换一行”速查表（直接全局替换）实际转换示例（JFramejs → JavaFX）迁移建
阅读更多...
Go异常处理、泛型和文件操作实例代码

Go异常处理、泛型和文件操作实例代码

《Go异常处理、泛型和文件操作实例代码》Go语言的异常处理机制与传统的面向对象语言（如Java、C#）所使用的try-catch结构有所不同,它采用了自己独特的设计理念和方法,：本文主要介绍Go异... 目录一：异常处理常见的异常处理向上抛中断程序恢复程序二：泛型泛型函数泛型结构体泛型切片泛型 map三：文
阅读更多...
MyBatis中的两种参数传递类型详解(示例代码)

MyBatis中的两种参数传递类型详解(示例代码)

《MyBatis中的两种参数传递类型详解(示例代码)》文章介绍了MyBatis中传递多个参数的两种方式,使用Map和使用@Param注解或封装POJO,Map方式适用于动态、不固定的参数,但可读性和安... 目录✅ android方式一：使用Map<String, Object>✅ 方式二：使用@Param
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2