【HTML实战】把爱心代码放在自己的网站上是一种什么体验？

花无缺

👨‍💻个人主页：@花无缺
欢迎点赞👍 收藏⭐ 留言📝 加关注✅!
本文由 花无缺 原创

收录于专栏【HTML】

最近随着电视剧《点燃我温暖你》的火热播出，剧中帅气学霸李洵的炫酷爱心代码也迅速火出了圈，作为一个喜欢动手实践的我来说正是一个大好机会啊，于是我就把代码搬到了自己的网站上，源码我也放在了我的GitHub上，大家有需自取哦~💗

仓库地址：『https://github.com/huawuque404/Love-code』
也欢迎大家

star

Issues

fork

并

pr

哦，一起来开发更多好看的样式或者动态效果吧！

网站效果：『https://www.huawuque404.cn/love.html』

后面有时间的话我会将各式各样的爱心代码更新在这个仓库里，如果大家感兴趣的话就来和我一起创造爱心吧~😍

今天周末了，大家都要好好吃饭，好好睡觉哦！🎉

拜拜！

GitHub进不去的话，源代码这也有一份，有点长：

<!DOCTYPEhtml><html><head><title> 爱心代码 </title><metacharset="utf-8"><metaname="Author"content="花无缺"><metaname="Keywords"content="爱心代码"><metaname="Description"content="爱心代码"><linkrel="shortcut icon"href="../picture/爱心.png"type="image/x-icon"><style>html,
        body{height: 100%;padding: 0;margin: 0;background: #000;}canvas{position: absolute;width: 100%;height: 100%;}</style></head><body><canvasid="pinkboard"></canvas><script>var settings ={particles:{length:500,duration:2,velocity:100,effect:-0.75,size:30,},};(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 =newDate().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(){functionPoint(x, y){this.x =(typeof x !=='undefined')? x :0;this.y =(typeof y !=='undefined')? y :0;}Point.prototype.clone=function(){returnnewPoint(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;returnthis;};Point.prototype.normalize=function(){var length =this.length();this.x /= length;this.y /= length;returnthis;};return Point;})();var Particle =(function(){functionParticle(){this.position =newPoint();this.velocity =newPoint();this.acceleration =newPoint();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){functionease(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;functionParticlePool(length){

                particles =newArray(length);for(var i =0; i < particles.length; i++)
                    particles[i]=newParticle();}ParticlePool.prototype.add=function(x, y, dx, dy){
                particles[firstFree].initialize(x, y, dx, dy);

                firstFree++;if(firstFree == particles.length) firstFree =0;if(firstActive == firstFree) firstActive++;if(firstActive == particles.length) firstActive =0;};ParticlePool.prototype.update=function(deltaTime){var i;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);}while(particles[firstActive].age >= duration && firstActive != firstFree){
                    firstActive++;if(firstActive == particles.length) firstActive =0;}};ParticlePool.prototype.draw=function(context, image){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;})();(function(canvas){var context = canvas.getContext('2d'),
                particles =newParticlePool(settings.particles.length),
                particleRate = settings.particles.length / settings.particles.duration,
                time;functionpointOnHeart(t){returnnewPoint(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;functionto(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 < Math.PI){
                    t +=0.01;
                    point =to(t);
                    context.lineTo(point.x, point.y);}
                context.closePath();

                context.fillStyle ='#ea80b0';
                context.fill();var image =newImage();
                image.src = canvas.toDataURL();return image;})();functionrender(){requestAnimationFrame(render);var newTime =newDate().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 < 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);}

                particles.update(deltaTime);
                particles.draw(context, image);}functiononResize(){
                canvas.width = canvas.clientWidth;
                canvas.height = canvas.clientHeight;}
            window.onresize = onResize;setTimeout(function(){onResize();render();},10);})(document.getElementById('pinkboard'));</script></body></html>

🌸欢迎
关注
我的博客：来和我一起成长吧
🥇往期精彩好文：
📢【HTML基础知识详解】
📢【CSS基础认知】
你们的点赞👍 收藏⭐ 留言📝 关注✅
是我持续创作，输出
优质内容
的最大动力！
谢谢！

标签： html 前端

本文转载自: https://blog.csdn.net/huawuque404/article/details/127810748
版权归原作者 花无缺~ 所有，如有侵权，请联系我们删除。

【HTML实战】把爱心代码放在自己的网站上是一种什么体验？

发表评论

“【HTML实战】把爱心代码放在自己的网站上是一种什么体验？”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航