時(shí)間：2023-07-05 03:51:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-07-05 03:51:01 來源：網(wǎng)站運(yùn)營
html+css+js制作520表白網(wǎng)頁，全屏的愛心和表白語網(wǎng)頁動(dòng)畫代碼，浪漫的520愛心表白動(dòng)畫特效：
在線咨詢
一年一度的/520情人節(jié)/七夕情人節(jié)/生日禮物/告白師妹/程序員表白, 一款很有創(chuàng)意的JavaScript愛情表白網(wǎng)頁動(dòng)畫特效 js愛心氣泡表白墻特效代碼，js+css3實(shí)現(xiàn)的程序員愛心表白網(wǎng)頁動(dòng)畫，帶戀愛時(shí)間記錄滿屏的粉色愛心漂浮背景動(dòng) <!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; // 創(chuàng)建畫布 var ctx = canvas.getContext('2d'); // 創(chuàng)建圖片對象 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){ // 設(shè)置文字屬性 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>關(guān)鍵詞：表白,浪漫
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
