HTML跳动爱心代码|最近很火的爱心代码你还没收到吗

最近很火的跳动爱心代码HTML实现可DIY

看效果

QQ录屏20221108115545

点个赞吧,养成好习惯
不想动手的小伙伴可以直接👇👇
阿里云盘直接提取
阿里云盘 DIY版----提取码: f30q

使用说明

主体代码来源于网络,让我们为原作者点赞👍
我用css3的animate和@keyframes帧动画加了一个跳动效果

.heart{animation: heart 1s infinite ease-in-out;}@keyframes heart{0%,
    100%{transform:rotate(-2deg)scale(1);}50%{transform:rotate(2deg)scale(1.12);}}

可自行修改爱心颜色

context.fillStyle ="#dc4b61";//自定义爱心颜色

修改基础参数

var settings ={particles:{length:520,// 爱心数量duration:5,// 数值变大向内收缩velocity:100,// 移动速度effect:0.75,//正值外发散size:60,// 大小}}

DIY输入自定义文字实现- 我用了一个简单的输入框和按钮实现

input {
    font-size: 1.375rem;
    color: #ff437b;    /*这里修改文字颜色*/
    text-align: center;
    background: none;
}
<divclass="text_box"><inputtype="text"id="text"placeholder="送给你的那个[Ta]️"><buttonid="btn"onclick="fn()">❤️</button></div><script>functionfn(){var a1 = document.querySelector('#text');var btn = document.querySelector('#btn');
        a1.style.border ='none';
        btn.parentNode.removeChild(btn);//点击爱心后移除元素}</script>

其他效果背景/文字/图片就看大家自由发挥了

源代码部分

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metahttp-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><divid="jsi-cherry-container"class="container "><!-- 爱心 --><canvasid="pinkboard"class="container heart"></canvas><!-- 输入你需要的文字 --><divclass="text_box"><inputtype="text"id="text"placeholder="送给你的那个[Ta]️"><buttonid="btn"onclick="fn()">❤️</button></div></div></body><scriptsrc="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>functionfn(){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 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 =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);};}})();/*
         * Point class
         */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;})();/*
         * Particle class
         */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;})();/*
         * ParticlePool class
         */var ParticlePool =(function(){var particles,
                firstActive =0,
                firstFree =0,
                duration = settings.particles.duration;functionParticlePool(length){// create and populate particle pool
                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);// 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 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 =newParticlePool(settings.particles.length),
                particleRate =
                settings.particles.length / settings.particles.duration,// particles/sec
                time;// get point on heart with -PI <= t <= PIfunctionpointOnHeart(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);}// 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 pathfunctionto(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 imagevar image =newImage();
                image.src = canvas.toDataURL();return image;})();// render that thing!functionrender(){// next animation framerequestAnimationFrame(render);// update timevar newTime =newDate().getTime()/1000,
                    deltaTime = newTime -(time || newTime);
                time = newTime;// clear canvas
                context.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 particles
                particles.update(deltaTime);
                particles.draw(context, image);}// handle (re-)sizing of the canvasfunctiononResize(){
                canvas.width = canvas.clientWidth;
                canvas.height = canvas.clientHeight;}
            window.onresize = onResize;// delay rendering bootstrapsetTimeout(function(){onResize();render();},10);})(document.getElementById("pinkboard"));</script></html>

分享结束,快去试试吧🎉🎉🎉

标签：前端 html5 javascript

本文转载自: https://blog.csdn.net/wuyou_w/article/details/127750669
版权归原作者 吾不图 所有，如有侵权，请联系我们删除。

HTML跳动爱心代码|最近很火的爱心代码你还没收到吗

最近很火的跳动爱心代码HTML实现可DIY

看效果

使用说明

源代码部分

发表评论

“HTML跳动爱心代码|最近很火的爱心代码你还没收到吗”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航