时间：2023-07-05 03:51:01 | 来源：网站运营
时间：2023-07-05 03:51:01 来源：网站运营
html+css+js制作520表白网页，全屏的爱心和表白语网页动画代码，浪漫的520爱心表白动画特效：
在线咨询
一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白, 一款很有创意的JavaScript爱情表白网页动画特效 js爱心气泡表白墙特效代码，js+css3实现的程序员爱心表白网页动画，带恋爱时间记录满屏的粉色爱心漂浮背景动 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>爱心</title> <style> *{margin:0; padding:0;} body{ background-color: #1E1E1E; } </style></head><body> <canvas id="drawHeart"></canvas> <script> var hearts = []; var canvas = document.getElementById('drawHeart'); var wW = window.innerWidth; var wH = window.innerHeight; // 创建画布 var ctx = canvas.getContext('2d'); // 创建图片对象 var heartImage = new Image(); heartImage.src = 'img/heart.svg'; var num = 100; init(); window.addEventListener('resize', function(){ wW = window.innerWidth; wH = window.innerHeight; }) function getText(){ var val = Math.random() * 10; if(val > 1 && val <= 3){ return '爱你一辈子'; } else if(val > 3 && val <= 5){ return '感谢你'; } else if(val > 5 && val <= 8){ return '喜欢你'; } else{ return 'I Love You'; } } function Heart(type){ this.type = type; // 初始化生成范围 this.x = Math.random() * wW; this.y = Math.random() * wH; this.opacity = Math.random() * .5 + .5; // 偏移量 this.vel = { x: (Math.random() - .5) * 5, y: (Math.random() - .5) * 5 } this.initialW = wW * .5; this.initialH = wH * .5; // 缩放比例 this.targetScale = Math.random() * .15 + .02; // 最小0.02 this.scale = Math.random() * this.targetScale; // 文字位置 this.fx = Math.random() * wW; this.fy = Math.random() * wH; this.fs = Math.random() * 10; this.text = getText(); this.fvel = { x: (Math.random() - .5) * 5, y: (Math.random() - .5) * 5, f: (Math.random() - .5) * 2 } } Heart.prototype.draw = function(){ ctx.save(); ctx.globalAlpha = this.opacity; ctx.drawImage(heartImage, this.x, this.y, this.width, this.height); ctx.scale(this.scale + 1, this.scale + 1); if(!this.type){ // 设置文字属性 ctx.fillStyle = getColor(); ctx.font = 'italic ' + this.fs + 'px sans-serif'; // 填充字符串 ctx.fillText(this.text, this.fx, this.fy); } ctx.restore(); } function render(){ ctx.clearRect(0, 0, wW, wH); for(var i = 0; i < hearts.length; i++){ hearts[i].draw(); hearts[i].update(); } requestAnimationFrame(render); } </script></body></html>关键词：表白,浪漫
