時(shí)間：2023-07-26 13:12:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-07-26 13:12:02 來源：網(wǎng)站運(yùn)營
520情人節(jié)表白網(wǎng)頁代碼~html+css+js浪漫星空?愛心3D相冊 (含音樂)：
在線咨詢
一年一度的/520情人節(jié)/七夕情人節(jié)/生日禮物/告白師妹/圣誕節(jié)/元旦節(jié)跨年/程序員表白,是不是要給女朋友或者正在追求的妹子一點(diǎn)小驚喜呢，今天這篇博客就分享下前端代碼html+css+javascript 如何實(shí)現(xiàn)3D立體動態(tài)相冊。趕緊學(xué)會了，來制作屬于我們程序員的浪漫吧！<body> <audio autoplay="autopaly"> <source src="renxi.mp3" type="audio/mp3" /> </audio> <!-- 星空html --> <!-- <div> --> <div class="container2"> <div class="content"> <canvas id="universe"></canvas> </div> </div> <!-- </div> --> <div class="title"> <!-- 星團(tuán)文字html --> <h3 class="STARDUST1"> 2016 - 2021</h3> <h1 class="STARDUST2">小夕-相遇是緣</h1> <h3 class="STARDUST3">L O V E <strong>?</strong> Y O U</h3> <!-- 愛心html --> <img class="img" src="./123.png" alt="" /> <canvas id="pinkboard"> </canvas> </div> </body><!-- 星團(tuán)js --> <script> let particles = []; let microparticles = []; const c1 = createCanvas({ width: $(window).width(), height: $(window).height(), }); const tela = c1.canvas; const canvas = c1.context; // $("body").append(tela); $("body").append(c1.canvas); setTimeout( function () { clearInterval(this.ID); }.bind(this), this.life ); } render() { this.canvas.beginPath(); this.canvas.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); // this.canvas.lineWidth = 2; this.canvas.shadowOffsetX = 0; this.canvas.shadowOffsetY = 0; // this.canvas.shadowBlur = 6; this.canvas.shadowColor = "#000000"; this.canvas.fillStyle = this.color; this.canvas.fill(); this.canvas.closePath(); } move() { this.x -= this.direction * Math.sin(this.progress / (this.random1 * 430)) * this.s; this.y -= Math.cos(this.progress / this.h) * this.s; if (this.x < 0 || this.x > this.w - this.radius) { clearInterval(this.ID); return false; } if (this.y < 0) { clearInterval(this.ID); return false; } this.render(); this.progress++; return true; } } setInterval( function () { particles.push(new Particle1(canvas)); random_life = 2000 * Math.random(); }.bind(this), random_life ); function clear() { let grd = canvas.createRadialGradient( tela.width / 2, tela.height / 2, 0, tela.width / 2, tela.height / 2, tela.width ); grd.addColorStop(0, "rgba(20,20,20,1)"); grd.addColorStop(1, "rgba(0,0,0,0)"); // Fill with gradient canvas.globalAlpha = 0.16; canvas.fillStyle = grd; canvas.fillRect(0, 0, tela.width, tela.height); } function update() { clear(); particles = particles.filter(function (p) { return p.move(); }); microparticles = microparticles.filter(function (mp) { return mp.move(); }); requestAnimationFrame(update.bind(this)); } function createCanvas(properties) { let canvas = document.createElement("canvas"); canvas.width = properties.width; // canvas.style.zIndex = 999; canvas.height = properties.height; let context = canvas.getContext("2d"); return { canvas: canvas, context: context, }; } update(); </script>mp3背景音樂,可自行下載更換即可~ mp3免費(fèi)下載地址 1.搜索需要的歌曲關(guān)鍵詞：星空,浪漫,音樂,相冊,表白
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
