HTML很火的浪漫爱心表白代码

 程序员的你是不是也想送个特别的礼物。今天给大家分享一个HTML+CSS+jQuery实现的情侣浪漫爱心表白JS特效,视觉效果还是相当不错!得此表白神器,程序猿也可以很浪漫!快去追你的女神吧,把这个告白爱心动画发给你心爱的她!

HTML代码如下,亲测可用。

<!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>

作者:吾不图原文地址:https://huaweicloud.csdn.net/63a56779b878a545459466a8.html

%s 个评论

要回复文章请先登录注册