【李峋】一分钟就能学会的爱心代码

一，新建一个txt文本文件

二，复制以下代码进入love.txt

1.css+html

* {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%;}  

2.javascript

/* * 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 = 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"));

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 = $("").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.FOCUS_POSITION &&this.z < this.FAR_LIMIT &&this.x < this.renderer.width * 1.5);},};$(function () {RENDERER.init();});

三，将后缀改为html

四，打开方式选择为浏览器打开