HTML很火的浪漫爱心表白代码
程序员的你是不是也想送个特别的礼物。今天给大家分享一个HTML+CSS+jQuery实现的情侣浪漫爱心表白JS特效，视觉效果还是相当不错！得此表白神器，程序猿也可以很浪漫！快去追你的女神吧，把这个告白爱心动画发给你心爱的她！
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DIY跳动爱心</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
height: 600px;
padding: 0;
margin: 0;
background: #000;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 500px;
height: 500px;
position: relative;
}
canvas {
z-index: 99;
position: absolute;
width: 500px;
height: 500px;
}
.text_box {
text-align: center;
position: absolute;
font-size: 1.125rem;
top: 36%;
left: 22%;
color: #ff437b;
z-index: 100;
}
input {
font-size: 1.375rem;
color: #ff437b;
text-align: center;
background: none;
}
button {
font-size: 1.375rem;
border: none;
border-radius: 4px;
}
input::input-placeholder {
color: #dc4b61;
}
input::-webkit-input-placeholder {
color: #dc4b61;
}
.heart {
animation: heart 1s infinite ease-in-out;
}
@keyframes heart {
0%,
100% {
transform: rotate(-2deg) scale(1);
}
50% {
transform: rotate(2deg) scale(1.12);
}
}
</style>
</head>
<body>
<div id="jsi-cherry-container" class="container ">
<!-- 爱心 -->
<canvas id="pinkboard" class="container heart"> </canvas>
<!-- 输入你需要的文字 -->
<div class="text_box">
<input type="text" id="text" placeholder="送给你的那个[Ta]️">
<button id="btn" onclick="fn()">️</button>
</div>
</div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function fn() {
var a1 = document.querySelector('#text');
var btn = document.querySelector('#btn');
a1.style.border = 'none';
btn.parentNode.removeChild(btn);
console.log("点关注不迷路!");
}
</script>
<script>
/*
* Settings
*/
var settings = {
particles: {
length: 500, // maximum amount of particles
duration: 2, // particle duration in sec
velocity: 100, // particle velocity in pixels/sec
effect: -0.75, // play with this for a nice effect
size: 30, // particle size in pixels
},
};
(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);
};
}
})();
/*
* Point class
*/
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;
})();
/*
* Particle class
*/
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;
})();
/*
* ParticlePool class
*/
var ParticlePool = (function() {
var particles,
firstActive = 0,
firstFree = 0,
duration = settings.particles.duration;
function ParticlePool(length) {
// create and populate particle pool
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);
// handle circular queue
firstFree++;
if (firstFree == particles.length) firstFree = 0;
if (firstActive == firstFree) firstActive++;
if (firstActive == particles.length) firstActive = 0;
};
ParticlePool.prototype.update = function(deltaTime) {
var i;
// update active particles
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);
}
// remove inactive particles
while (
particles[firstActive].age >= duration &&
firstActive != firstFree
) {
firstActive++;
if (firstActive == particles.length) firstActive = 0;
}
};
ParticlePool.prototype.draw = function(context, image) {
// draw active particles
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;
})();
/*
* Putting it all together
*/
(function(canvas) {
var context = canvas.getContext("2d"),
particles = new ParticlePool(settings.particles.length),
particleRate =
settings.particles.length / settings.particles.duration, // particles/sec
time;
// get point on heart with -PI <= t <= PI
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
);
}
// creating the particle image using a dummy canvas
var image = (function() {
var canvas = document.createElement("canvas"),
context = canvas.getContext("2d");
canvas.width = settings.particles.size;
canvas.height = settings.particles.size;
// helper function to create the path
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;
}
// create the path
context.beginPath();
var t = -Math.PI;
var point = to(t);
context.moveTo(point.x, point.y);
while (t < Math.PI) {
t += 0.01; // baby steps!
point = to(t);
context.lineTo(point.x, point.y);
}
context.closePath();
// create the fill
context.fillStyle = "#dc4b61";
context.fill();
// create the image
var image = new Image();
image.src = canvas.toDataURL();
return image;
})();
// render that thing!
function render() {
// next animation frame
requestAnimationFrame(render);
// update time
var newTime = new Date().getTime() / 1000,
deltaTime = newTime - (time || newTime);
time = newTime;
// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// create new particles
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 particles
particles.update(deltaTime);
particles.draw(context, image);
}
// handle (re-)sizing of the canvas
function onResize() {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
}
window.onresize = onResize;
// delay rendering bootstrap
setTimeout(function() {
onResize();
render();
}, 10);
})(document.getElementById("pinkboard"));
</script>
</html>
相关推荐
-
jQuery结合HTML5制作的爱心树表白动画
HTML代码如下: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <title>程序员用HTML5制作的爱心树表白动画- 柯乐义</title><base target="_blank" href="http
-
教你利用Python+Turtle绘制简易版爱心表白
一.效果 快放10倍 总共分为三部分,左上角的正文,下方的心形和右下角的署名 特别需要注意的一点是这种东西不但要装Python,还与分辨率有关(换个屏幕可能效果雪崩,因为用的是绝对坐标),因此并不建议实际拿去弄(哪怕能解决上述两个问题) 二.正文部分 效果: 本质是每写一行话,然后将坐标下移换行,再写一行,以此类推 # content就是该行的内容了,想些啥写啥吧 def drawLine(content, x, y, sleep=3): goto(x, y) write(content, fo
-
python练习之曾经很火的小人画爱心表白代码
导语 哈喽!我是木木子,又到了今日更新时刻! 我们来看看写什么呢? 小编有个好兄弟最近在追妹子,跟妹子打得火热!就差临门一脚了,这一jio我帮忙补上去了! 他问有没有什么酷炫的表白方式,可以给人心动的赶jio,表白的方式有许多种 今天木木子来教大家一个之前很火的小人画爱心表白代码! 正文 Turtle库是python的基础绘图库,这个库使用起来很方便,了解基础的一些信息之后学起来很快是小编绘图的首选! 首先绘制爱心 import turtle import time # 画心形圆弧 def
-
Python绘制的爱心树与表白代码(完整代码)
Python给女朋友带来的快乐 用的的开发工具为pycham,pycham也是广泛用于做Python开发的工具.运用的turtle库,当然了如果是安装了anaconda3这个库那更好,以为这里面有我们会做Python程序设计时用到的大部分的库,turtle它是python中一个绘制图像的函数库,可以用它来绘制很多的东西,比如简单的小黄人.玫瑰花等,这个库也可以生说是一只马良的神笔的吧.比如以下是为女朋友准备的小小的惊喜吧. 1.爱心树 import turtle import random de
-
Python制作表白爱心合集
目录 导语 正文 导语 "盘子里最后一块肉给你 一 冰激凌的第一口给你 一手机最后的10%电量给你!" 哈喽大家好!我是木木子,我要开始给大家放大招啦 你来之后,苦都不太苦,甜都特别甜 如果人类有尾巴的话,说起来有点不好意思 ,只要和你在一起,一定会止不住摇起来 我害怕你找不到我,所以我要藏在你心里 I love three things in the world.The sun,the moon and you.The sun for the day,the moon for the
-
jquery+html5烂漫爱心表白动画代码分享
本文实例讲述了jquery+html5烂漫爱心表白动画代码.分享给大家供大家参考.具体如下: jquery+html5烂漫爱心表白动画是一款jquery html5 canvas电子版的烂漫爱心表白动画,效果相当不错,非常有创意,很适合进行表白. 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery+html5烂漫爱心表白动画代码如下 <!DOC
-
HTML很火的浪漫爱心表白代码
程序员的你是不是也想送个特别的礼物.今天给大家分享一个HTML+CSS+jQuery实现的情侣浪漫爱心表白JS特效,视觉效果还是相当不错!得此表白神器,程序猿也可以很浪漫!快去追你的女神吧,把这个告白爱心动画发给你心爱的她! <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp
-
抖音很火的vbs表白代码(简单实用!)
好玩的循环表白代码 1,右键->新建文本文件 2,右键->编辑 3,粘贴下面代码 MsgBox " 十年相遇" MsgBox " 百年回眸" MsgBox " 千年同船渡" MsgBox " 我愿以万年的等待" MsgBox " 百世的轮回" MsgBox " 换你今朝一世情缘" MsgBox " 可否" dim a(5) a(0)=" 天大,地
-
python爱心表白 每天都是浪漫七夕!
本文为大家分享了python爱心表白的具体代码,供大家参考,具体内容如下 import turtle import time # 画爱心的顶部 def LittleHeart(): for i in range(200): turtle.right(1) turtle.forward(2) # 输入表白的语句,默认I Love you love = input('Please enter a sentence of love, otherwise the default is "I Love y
-
Java实现浪漫流星表白的示例代码
目录 介绍 核心代码 注意事项 介绍 本文实现的功能有: 1.播放音乐 2.自定义流星数量.飞行速度.光晕大小.流星大小 3.自定义表白话语 运用到的知识点有: GUI:java实现窗体.Swing.其实JAVA Swing的GUI目前企业中已经不用了,主要是一些学校和培训机构用来教导学生写一些游戏.小项目,练练手的. 多线程:让cpu同一时间处理多个任务(本文中涉及到音乐.文字缓慢出现.流星线条移动) 效果图: 音乐类(其实也可以不用音乐,有些人并不喜欢): 核心代码 import javaz
-
一篇文章教你用python画动态爱心表白
初级画心 学Python,感觉你们的都好复杂,那我来个简单的,我是直接把心形看作是一个正方形+两个半圆: 于是这就很简单了,十行代码解决: import turtle as t t.pensize(2) # 笔大小2像素 t.pencolor("red") # 颜色为红色 t.left(45) # 45度 t.fd(200) # 向前200直线 t.circle(100, 180) # 画一圆半径100 弧度180 t.right(90) # 向右90度 t.circle(100, 1
-
Python制作七夕比心表白代码详解
每到各种节日,不少小伙伴都会遇到这样一个世纪问题--怎么给心仪的女生/女朋友/老婆一个与众不同的节日惊喜. 这不马上就又到七夕了嘛,我们可以尝试用python给女朋友比心表白! 下面就带大家来领略一下python表白的方式,感受一下IT人的浪漫. Turtle基本参数 python的强大在于它有许多的强大的库,turtle是其中可以交互式的绘画的模块.也是很多提升初学者学习python乐趣的秘密法宝! 作为一个艺术白痴,想要画一幅画可能很困难,但是利用python的turtle库,只需要几行代码
-
520必备！这些Python表白代码祝你脱单成功
目录 一.浪漫玫瑰花 二.浪漫玫瑰加爱心 三.心心相印 四.粉嫩爱心 五.丘比特一键穿心 六.发射爱心小人 七.浪漫动态樱花树 八.专属心形词云 九.女朋友画像字符画 一.浪漫玫瑰花 实现代码: from turtle import * import time setup(1000,800,0,0) speed(0) penup() seth(90) fd(340) seth(0) pendown() speed(5) begin_fill() fillcolor('red') circle(5
-
抖音vbs表白代码大全 抖音vbscript表白代码使用方法
当然斗音很热,这篇文章也有蹭热度的嫌疑. 我们以前就收录了类似这样的属于恶作剧的代码,其实就是判读如果不是你想要的结果就是死循环. 抖音vbs表白代码制作教程 步骤一: 在电脑上新建一个txt文件. 步骤二: 打开txt文件,复制以下代码粘贴进去(可以修改中文部分,其它代码不要动!).保存并关闭txt文件. Set Seven = WScript.CreateObject("WScript.Shell") strDesktop = Seven.SpecialFolders("