? 我是如何獲取學姐芳心~html+css+js實現滿屏煙花3D相冊(含音樂+自定義文字)

一年一度的520情人節/七夕情人節/女朋友生日/程序員表白/送禮物/3D相冊,是不是要給女朋友或者正在追求的妹子一點小驚喜呢，今天這篇博客就分享下前端代碼如何實現3D立體動態相冊。趕緊學會了，來制作屬于我們程序員的浪漫吧！

---

? 文章目錄

• ? 我是如何獲取學姐芳心~html+css+js實現滿屏煙花3D相冊(含音樂+自定義文字)
• ? 前言
• ? 更多告白演示
• • 1. 單相片演示(已兼容H5手機和PC電腦)
  • 2. 多相片演示(已兼容H5手機和PC電腦)
• ? 代碼文件目錄
• 一、文字修改(代碼實現)
• 二、3D相冊(代碼實現)
• • html (字幕部分)
  • html (3D相冊)
  • html (文字打印)
  • html (播放器)
  • js(文字打印)
  • js (煙花效果實現)
• 三、3D相冊裁剪(教程)
• • 1.相片裁剪(教程)
  • 2.美圖秀秀(電腦版)裁剪圖片
• 四、歌曲mp3更換教程(教程)
• 五、做好的網頁效果,如何通過發鏈接給別人看?
• • 1.1 解決部署上線~> 部署上線工具(可永久免費使用)
  • • 1.1部署流程
    • 1.2 哇~ 部署成功
• 六、前端 零基礎 入門到高級 (視頻+源碼+開發軟件+學習資料+面試題) 一整套 (教程)
• 七、? 源碼獲取
• 八、?更多表白源碼

---

? 前言

520/七夕情人節表白[滿屏煙花3D相冊],程序員也可以很浪漫哦 ! 程序員向妹子表白專用代碼!?
HTML+css3+js 抖音很火的3d旋轉相冊-包含音樂,(送女友,表白,生日)動態生成效果,這樣制作的~,現在,越來越多的人喜歡用視頻記錄生活,照片多的友友也會選擇制作動態相冊視頻,不僅創意十足,同時還能展現自我風采, 撩妹神器哦!

---

? 更多告白演示

2.櫻花雨3D相冊演示地址3.文字開場白+浪漫櫻花飄落演示地址

1. 單相片演示(已兼容H5手機和PC電腦)

2. 多相片演示(已兼容H5手機和PC電腦)

? 代碼文件目錄

一、文字修改(代碼實現)

示例：找到index.html文件中的script標簽下 words字段,只需要修改文字就行~

二、3D相冊(代碼實現)

html (字幕部分)

<!-- 打字 --><div class="typing"><!-- 字幕 --><h2 class="header-sub-title" id="word"></h2><h2 class="header-sub-title blink">|</h2></div>

html (3D相冊)

<!-- 相冊 S --><div class="box"><ul class="minbox"><li></li><li></li><li></li><li></li><li></li><li></li></ul><ol class="maxbox"><li></li><li></li><li></li><li></li><li></li><li></li></ol></div><!-- 相冊 E -->

html (文字打印)

<!-- 打字 --><div class="typing"><!-- 字幕 --><h2 class="header-sub-title" id="word"></h2><h2 class="header-sub-title blink">|</h2></div>

html (播放器)

<!-- 播放器 --><div id="app"><div class="container_player"><div class="music-box"><!-- 音樂圖片 --><img src="img/01.png" /><div class="mask"><div class="mplayer" onclick="play()"><i class="fa"><span class="before"></span><span class="after"> </span></i><svgclass="loadingSvg"width="25"height="25"viewBox="0,0,50,50"style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"><circle></circle></svg></div><div class="m-circle m-progress"><svg width="163" height="163" viewBox="0,0,163,163"><circlecx="81"cy="81"r="159"stroke-width="8"stroke="rgba(255, 206, 113, 0.2)"fill="rgba(0,0,0,.2)"></circle><circleclass="a"cx="81"cy="81"r="159"stroke-width="6"stroke="rgba(255, 206, 113, 1)"fill="none"stroke-dasharray="0 999"transform="matrix(0,-1,1,0,0,163)"></circle></svg></div><div class="m_time"><span class="mplayer_curtime">00:00</span><span class="m-join">/</span><span class="mplayer_durtime">00:00</span></div></div></div></div></div><!-- 音樂 --><audio id="myAudio" src="music/yinyue.mp3"></audio>

js(文字打印)

/* 只需要修改這里的文字就行 */<script>// 打印字const words = ["?2021.5.20與你相愛 1314天~","?你的微笑，是我這輩子見過最美的景色。","?我想收藏這樣的風景一輩子。","?我的人生放蕩不羈，不曾為誰停留，","?但自從遇到你，我會用余生來守護你。","?我不想做你人生的插曲，","?我想成為你一生的主題曲。","?我愛你?。",];let i = 0;let timer;// 速度let deleteDelay = 3000;let typeSpeed = 100;let delSpeed = 50;/* 開始編寫文字 */function typingEffect() {let word = words[i].split("");var loopTyping = function () {if (word.length > 0) {document.getElementById("word").innerHTML += word.shift();} else {delay(function () {deletingEffect(); // do stuff}, deleteDelay); // end delay// deletingEffect();return false;}timer = setTimeout(loopTyping, typeSpeed);};loopTyping();}/* 開始編寫文字 */typingEffect();</script>

js (煙花效果實現)

var audio = document.getElementById("myAudio"); var currentTime = $(".mplayer_curtime"); var durationTime = $(".mplayer_durtime"); var circle = $(".m-circle .a")[0]; var circumference = 2 * Math.PI * 160; var timer_audio;function play() {if (audio.paused) {audio.play();$(".music-box").addClass("mplaying");timer_audio = setInterval(() => {if (audio.ended) {$(".music-box").removeClass("mplaying");currentTime.text("00:00");circle.setAttribute("stroke-dasharray", "0 999");} else {currentTime.text(formatTime(audio.currentTime));durationTime.text(formatTime(audio.duration));var step = circumference / audio.duration;var timeDisplay = Math.floor(audio.currentTime);circle.setAttribute("stroke-dasharray","" + timeDisplay * step + " " + circumference);}}, 100);} else {audio.pause();$(".music-box").removeClass("mplaying");} } 三、3D相冊裁剪(教程)

教程如下：需要12張圖片, 1-6 圖片是大圖 400px400px ,01-06 圖片是小圖 100px100px

將準備好的圖片,自行替換 img 文件中的圖片即可!

1.相片裁剪(教程)

1.1首先:下載美圖秀秀/百度下載/或者軟件安裝
1.2或者使用在線鏈接裁剪—> 在線裁剪圖片鏈接

2.美圖秀秀(電腦版)裁剪圖片

2.1選擇圖片裁剪

四、歌曲mp3更換教程(教程)

如需更換mp3背景音樂,可自行下載更換即可~ mp3免費下載地址 1.1搜索需要的歌曲

1.2下載

1.3獲取歌曲id 1.4關注公眾號以后/復制鏈接到瀏覽器打開

1.5下載mp3 ~下載完畢以后自行替換mp3文件即可(如不想修改代碼,必須保持名稱一致)

---

# ?五、👇🏻👇🏻👇🏻更多源碼👇🏻👇🏻👇🏻

總結

以上是生活随笔為你收集整理的一行代码教你撩妹手到擒来html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。