最近很火的爱心代码

爱心代码

<!DOCTYPE html>
<html><head><title></title><script src="js/jquery.min.js"></script></head><style>* {padding: 0;margin: 0;}html,body {height: 100%;padding: 0;margin: 0;background: #000;}.aa {position: fixed;left: 50%;bottom: 10px;color: #ccc;}.container {width: 100%;height: 100%;}canvas {z-index: 99;position: absolute;width: 100%;height: 100%;}</style><body><!-- 樱花 --><div id="jsi-cherry-container" class="container"><audio autoplay="autopaly"><source src="renxi.mp3" type="audio/mp3" /></audio><img class="img" src="./123.png" alt="" /><!-- 爱心 --><canvas id="pinkboard" class="container"> </canvas></div></body>
</html>
<script>/** Settings*/var settings = {particles: {length: 500, // maximum amount of particlesduration: 2, // particle duration in secvelocity: 100, // particle velocity in pixels/seceffect: -0.75, // play with this for a nice effectsize: 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 poolparticles = 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 queuefirstFree++;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 particlesif (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 particleswhile (particles[firstActive].age >= duration &&firstActive != firstFree) {firstActive++;if (firstActive == particles.length) firstActive = 0;}};ParticlePool.prototype.draw = function (context, image) {// draw active particlesif (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/sectime;// get point on heart with -PI <= t <= PIfunction 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 canvasvar 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 pathfunction 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 pathcontext.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 fillcontext.fillStyle = "#ea80b0";context.fill();// create the imagevar image = new Image();image.src = canvas.toDataURL();return image;})();// render that thing!function render() {// next animation framerequestAnimationFrame(render);// update timevar newTime = new Date().getTime() / 1000,deltaTime = newTime - (time || newTime);time = newTime;// clear canvascontext.clearRect(0, 0, canvas.width, canvas.height);// create new particlesvar 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);}// handle (re-)sizing of the canvasfunction onResize() {canvas.width = canvas.clientWidth;canvas.height = canvas.clientHeight;}window.onresize = onResize;// delay rendering bootstrapsetTimeout(function () {onResize();render();}, 10);})(document.getElementById("pinkboard"));</script><script>var RENDERER = {INIT_CHERRY_BLOSSOM_COUNT: 30,MAX_ADDING_INTERVAL: 10,init: function () {this.setParameters();this.reconstructMethods();this.createCherries();this.render();
if (navigator.userAgent.match(/(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {// var box = document.querySelectorAll(".box")[0];// console.log(box, "移动端");// box.style.marginTop = "65%";}},setParameters: function () {this.$container = $("#jsi-cherry-container");this.width = this.$container.width();this.height = this.$container.height();this.context = $("<canvas />").attr({ width: this.width, height: this.height }).appendTo(this.$container).get(0)var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),x = this.renderer.width / 2 + this.x * rate,y = this.renderer.height / 2 - this.y * rate;return { rate: rate, x: x, y: y };},
re}} else {this.phi += Math.PI / (axis.y == this.thresholdY ? 200 : 500);this.phi %= Math.PI;`在这里插入代码片`}if (this.y <= -this.renderer.height * this.SURFACE_RATE) {this.x += 2;this.y = -this.renderer.height * this.SURFACE_RATE;} else {this.x += this.vx;this.y += this.vy;}return (this.z > -this.FOCUS_POSITION &&this.z < this.FAR_LIMIT &&this.x < this.renderer.width * 1.5);},};$(function () {RENDERER.init();});</script> 

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/25575.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

爱心发射代码带名字升级版

上次的爱心发射发出来之后&#xff0c;群友想问能不能把心爱的人名字放在爱心中间。 当然没问题啊&#xff0c;于是我就改了改代码&#xff0c;让女神王铁蛋显示在爱心中间&#xff0c;同时还可以在屏幕上飘动满屏的王铁蛋&#xff0c;大大小小、快快慢慢的王铁蛋。 这还拿不下…

跳动的爱心代码--李峋爱心代码(完整源码)

本文章分为两部分&#xff1a; 第一部分为实现效果展示&#xff0c;第二部分是实现跳动爱心源码。 关注微信公众号&#xff1a; 先取个名字吧 跳动的爱心效果展示 关注微信公众号&#xff08;先取个名字吧&#xff09;获取完整源码&#xff0c;回复爱心代码。 实现步骤 1.建一…

火爆了的爱心代码

请下载Visual Studio Code或者HBuilder&#xff08;我最喜欢用这个因为是中文版的&#xff09;复制然后粘贴之后用浏览器运行就行然后也可以复制出来发到微信手机也可以打开 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> &l…

跳动爱心代码-李峋爱心代码(手把手教学)

电视剧 点燃我&#xff0c;温暖你 打火机与公主裙 李洵爱心跳动效果。 获取完整代码&#xff0c;公众号「先取个名字吧」 回复爱心代码。 本文分为两种方式讲解如何运行代码&#xff0c;第一种方式比较简单推荐新手&#xff08;完全不懂编程的&#xff09;&#xff0c;第二种…

chatgpt赋能python:Python怎么让输出结果用空格断开

Python怎么让输出结果用空格断开 介绍 Python是一种高级编程语言&#xff0c;语法简洁、易读、易维护&#xff0c;非常适合初学者和中级开发者。在Python编程中&#xff0c;我们经常需要输出结果&#xff0c;而如果我们需要让输出结果用空格断开&#xff0c;该怎么做呢&#…

chatgpt智能提效职场办公-ppt怎么转pdf文件

作者&#xff1a;虚坏叔叔 博客&#xff1a;https://xuhss.com 早餐店不会开到晚上&#xff0c;想吃的人早就来了&#xff01;&#x1f604; 要将PPT转为PDF文件&#xff0c;可以按照以下步骤操作&#xff1a; 1.打开PPT文件&#xff0c;点击“文件”菜单&#xff0c;选择“导出…

善借ChatGPT提效,Cursor四问答设计业务简一概念模型示例

作为一个程序员&#xff0c;对新事物不好奇&#xff0c;没有学习新技术的自觉意识&#xff0c;不知道如何更好地运用工具来提升自己的效率&#xff0c;又如何保持自己的竞争力呢 上一次文字创作&#xff1a;梦&#xff0c;仰望星空&#xff1b;路&#xff0c;脚踏实地 今天看…

chatgpt赋能python:Python游戏——一场崭新的冒险

Python游戏——一场崭新的冒险 Python作为一种简单易用的编程语言&#xff0c;已被广泛应用于各种领域。其中&#xff0c;Python游戏开发逐渐成为了热门话题。通过使用Python语言&#xff0c;我们可以轻松地创建各种有趣的游戏。在本文中&#xff0c;我们将一起探讨Python游戏…

人工智能已经到来,但这项技术在 2023 年面临重大挑战

来源&#xff1a;ScienceAI 尽管人工智能已经出现在我们的生活中多年&#xff0c;但 2022 年是该技术的主要试验场。在 ChatGPT、AI 艺术一代和拥抱 AI 的好莱坞之间&#xff0c;AI 在公众中找到了一种新的立足点和炒作。但随之而来的是对隐私和道德的新一轮担忧。 美国东北大学…

大模型与人类的未来 | 基于认知神经科学的大模型论坛精彩回顾

导读 6 月 10 日&#xff0c;智源大会“基于认知神经科学的大模型论坛”召开&#xff0c;本次论坛邀请到了认知神经、脑科学领域非常有建树的专家&#xff0c;深度讨论大模型的能力与局限性&#xff0c;包括对未来人工智能发展方向的讨论。论坛主席是清华大学脑与智能实验室首席…

大语言模型的创意能力到底几何?探索从GPT-2到GPT-4的演进

编者按&#xff1a;大语言模型可以提供许多创意性内容&#xff0c;如写诗、写小说等。那么到底应该如何评估大语言模型生成的创意性内容的水平呢&#xff1f; 本文探讨了GPT-2到GPT-4的创造性&#xff0c;并分析了这些模型在不同创造性测试中的表现。作者使用了三种测试来衡量模…

【EmailCamel外贸邮件群发】一对一发送,投递率高

说到邮件群发可能有很多客户会理解为&#xff0c;如在QQ里可以加多人的邮箱进行邮件群发&#xff0c;这样收件人看到的这封邮件是群发邮件&#xff0c;可以看到其它的收件人。EmailCamel外贸邮件群发&#xff0c;是模拟人工手动一对一发送&#xff0c;客户收到邮件和通过手动发…

【EmailCamel外贸邮件群发】让邮件不进入垃圾邮件箱的实用方法-建立独立发信域!

很多人不知道邮件为什么会进垃圾箱&#xff1f;之前写过一篇文章“邮件到达收件箱系列文章16&#xff1a;企业邮箱发邮件进垃圾箱怎么办?” 。里面提到了5个建议。今天我们再介绍从硬件方面&#xff0c;如何减少进垃圾箱&#xff01; 做外贸避免不了需要群发开发信&#xff08…

他居然发邮件请我去吃饭——邮件伪造那些事儿

他居然发邮件请我去吃饭——邮件伪造那些事儿 今天中午吃午饭的时候&#xff0c;突然收到一封邮件&#xff0c;我一看&#xff0c;不得了啊&#xff0c;居然是美国前总统给我发来的邮件&#xff0c;还说要我助他一臂之力成为新总统。下午再看他的新闻&#xff0c;感觉他现在都自…

邮件代发、国外邮件代发、外贸邮件代发平台,送达率、打开率高的秘密

邮件营销、邮件推广已发展几十年了&#xff0c;对于一家企业而言邮件营销也是必须的。比如新产品推广、价格折扣、活动推广、交易类邮件、跟进邮件、客户关怀等都离不开邮件。它是开发客户、维系客户的重要渠道之一。 对于外贸企业、出海企业而言&#xff0c;邮件&#xff08;…

做外贸业务发邮件时邮件被退信,是什么原因?

客户咨询&#xff1a; 答: 从对方服务器的提示来看&#xff0c;是对方的该邮件地址不存在了&#xff0c;因为时隔一个月&#xff0c;该员工可能离职&#xff0c;或者其它原因&#xff0c;该邮件地址账号已从服务器上删除了。 发邮件&#xff0c;邮件提示是最好的说明。针对上面…

如何进行邮件群发营销?外贸邮件怎么进行邮件群发推广?

众所周知&#xff0c;国际业务往来都要依靠邮件收发。对于创业公司来说&#xff0c;常常要开发、拓展客户&#xff0c;让客户了解我们的产品和提供的服务。在拓展客户阶段&#xff0c;需要给客户提供到资料&#xff0c;但是一封一封邮件发送太慢了&#xff0c;所以可以选择群发…

春节期间外贸老鸟们都会掌握的那些事(内含祝福话术及邮件模板)

中国外贸规模在长期疫情的大环境下&#xff0c;外贸业界克服诸多困难&#xff0c;实现了量稳质升。随着我们迈入2023年&#xff0c;外贸人除了需要继续“强身健体”外&#xff0c;同时也将面临更多的挑战&#xff0c;本期Boom将从四个维度给大家分享临近中国春节期间&#xff0…

外贸开发信群发邮件打开率PK进垃圾箱?

PK赛&#xff0c;外贸开发信群发应该关注是否到达垃圾箱还是更应该关注客户邮件打开率&#xff1f; 部分客户所持观点&#xff1a;EmailCamel提供海外群邮试用版&#xff0c;有些客户拿到试用版后&#xff0c;给自己的gmail,hotmail或者企业邮箱发邮件&#xff0c;发现进垃圾箱…

如何做好外贸邮件营销?记住这几件不要!

在生活中&#xff0c;说起外贸邮件营销&#xff0c;我相信很多人都会说这个我也会&#xff0c;但是问道如何做好外贸邮件营销&#xff0c;相信不少人都没有像前面那样自信说会了吧。那么&#xff0c;如何做好外贸邮件营销呢&#xff1f;下面就让摩杜云小杜来跟大家详细的介绍一…