html中的爱心小特效。

2023-10-16 01:50| 来源: 网络整理| 查看: 265

hello，分享一个好玩的，我想大家大家有时候也是比较累吧，最近这个特效也是很火，我就拔来了一下源码，这里和大家看一下，

【爱心代码｜源码在视频简介｜这次一定！】 https://www.bilibili.com/video/BV1Ye411F7EZ/?share_source=copy_web&vd_source=385ba0043075be7c24c4aeb4aaa73352

爱心代码｜源码在视频简介｜这次一定！

在这里插入图片描述

代码在这里：

loveHeart html, body { height: 100%; padding: 0; margin: 0; background: #000; } canvas { position: absolute; width: 100%; height: 100%; } p{ position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); color: pink; animation: k 1.5s ease-in-out infinite; } @keyframes k{ 100%{ font-size: 24px; opacity: 0; } } 致我最爱的夏子恬小朋友 var settings = { particles: { length: 600, // 爱心的大小 duration: 2, // 爱心扩散速度，越小速度越快 velocity: 100, // 爱心扩散速度，越小速度越慢 effect: -0.75, // 爱心收缩效果，比如：1扩散，-2收缩 size: 26, // 爱心数量 }, }; (function () { var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0; a 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 var i; // 更新活性粒子 if (firstActive for (i = firstActive; i // 绘制活性粒子 if (firstActive for (i = firstActive; i 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 // 下一个动画帧 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 canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; } window.onresize = onResize; // 延迟渲染引导 setTimeout(function () { onResize(); render(); }, 10); })(document.getElementById('pinkboard'));

，人家写的就是不一样，这个Javascrip,还是要学好Javascrip，不然难办，这里的代码看起来都是迷迷糊糊的。

【本文地址】

公司简介

联系我们