前端超炫表白干货（一） |
您所在的位置：网站首页 › 告白信封怎么写 › 前端超炫表白干货（一） |
前端超炫表白干货（一）
|
表白代码，送给你爱的人 梦码在这里首先很感谢来看此博客的同学们，如果你觉得还可以，别忘记点个赞加关注哦，别忘记了这才是前端表白干货（一）哦，后面还有二、三、四。。。。。。错过了就可惜了 这次梦码分享的是一个前端代码，不会的同学复制代码写在后缀为html的文件里浏览器打开就可以了，也比较方便，如果要改页面显示的内容（比如加上对方名字啥的），可以在文件里面直接改。最后再把文件发给你喜欢的那个他（她），用浏览器打开，说不定从此就能告别单身生活了呢。哈哈哈。。 首先我们先看看效果
这个不是静态的哦，他是动态的，梦码有点懒，就只截了个图，各位同学别怪梦码，想看就自己去运行，废话也不多说了，我们直接上代码吧！ love body{ overflow: hidden; margin: 0; } h1{ position: fixed; top: 50%; left: 0; width: 100%; text-align: center; transform:translateY(-50%); font-family: 'Love Ya Like A Sister', cursive; font-size: 40px; color: #c70012; padding: 0 20px; } h1 span{ font-size:20px; } var canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d"); var ww,wh; function onResize(){ ww = canvas.width = window.innerWidth; wh = canvas.height = window.innerHeight; } ctx.strokeStyle = "red"; ctx.shadowBlur = 25; ctx.shadowColor = "hsla(0, 100%, 60%,0.5)"; var precision = 100; var hearts = []; var mouseMoved = false; function onMove(e){ mouseMoved = true; if(e.type === "touchmove"){ hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY)); hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY)); } else{ hearts.push(new Heart(e.clientX, e.clientY)); hearts.push(new Heart(e.clientX, e.clientY)); } } var Heart = function(x,y){ this.x = x || Math.random()*ww; this.y = y || Math.random()*wh; this.size = Math.random()*2 + 1; this.shadowBlur = Math.random() * 10; this.speedX = (Math.random()+0.2-0.6) * 8; this.speedY = (Math.random()+0.2-0.6) * 8; this.speedSize = Math.random()*0.05 + 0.01; this.opacity = 1; this.vertices = []; for (var i = 0; i |
【本文地址】