javascript
制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)
? 制作一個浪漫溫馨的生日禮物送她~html+css+javascript藍色夢幻海洋3D相冊(含音樂)
一年一度的/520情人節/七夕情人節/生日禮物/告白師妹/程序員表白,是不是要給女朋友或者正在追求的妹子一點小驚喜呢，今天這篇博客就分享下前端代碼html+css+javascript 如何實現3D立體動態相冊。趕緊學會了，來制作屬于我們程序員的浪漫吧！
? 文章目錄
- ? 制作一個浪漫溫馨的生日禮物送她~html+css+javascript藍色夢幻海洋3D相冊(含音樂)
- ? 前言
- ? 3D相冊演示(含背景音樂)可自定義12張相片
- 1. 10款靜態演示
- 2. 10款動態演示
- ? 代碼文件目錄
- 一、3D相冊(代碼實現)
- html (3D相冊部分)
- js (部分)
- css (3D相冊部分)
- ? 3D相冊更改背景教程
- 二、3D相冊裁剪(教程)
- 1.相片裁剪(教程)
- 2.美圖秀秀(電腦版)裁剪圖片
- 三、歌曲mp3更換教程(教程)
- 四、做好的網頁效果,如何通過發鏈接給別人看?
- 1.1 解決部署上線~> 部署上線工具(可永久免費使用)
- 1.1部署流程
- 1.2 哇~ 部署成功
- 五、前端 零基礎 入門到高級 (視頻+源碼+開發軟件+學習資料+面試題) 一整套 (教程)
- 六、? 源碼獲取
- 七、?更多表白源碼
? 前言
520/七夕情人節表白[櫻花飄落3D相冊],程序員也可以很浪漫哦 ! 程序員向妹子表白專用代碼!?
HTML+css3+js 抖音很火的3d旋轉相冊-包含音樂,(送女友,表白,生日)動態生成效果,這樣制作的~,現在,越來越多的人喜歡用視頻記錄生活,照片多的友友也會選擇制作動態相冊視頻,不僅創意十足,同時還能展現自我風采, 撩妹神器哦!
? 3D相冊演示(含背景音樂)可自定義12張相片
1. 藍色夢幻海洋3D相冊->在線演示地址
2.(生日快樂)蛋糕煙花+藍色夢幻海洋3D相冊–>在線演示地址
1. 10款靜態演示
2. 10款動態演示
? 代碼文件目錄
一、3D相冊(代碼實現)
html (3D相冊部分)
<!--* @Author: your name* @Date: 2021-04-14 13:39:56* @LastEditTime: 2021-04-16 10:10:49* @LastEditors: Please set LastEditors* @Description: In User Settings Edit* @FilePath: \TweenMax藍色夢幻海洋網頁特效\index.html --> <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><title>浪漫海洋夢幻告白3D相冊</title><link rel="stylesheet" href="css/style.css" /><link rel="stylesheet" href="css/style0.css" /></head><body><!-- 熒光S --><div class="container"><!-- 打字 --><div class="typing"><!-- 字幕 --><h2 class="header-sub-title" id="word"></h2><h2 class="header-sub-title blink">|</h2></div><audio controls autoplay><source src="mp3/3.mp3" /></audio><!-- 相冊 --><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></div></body> </html>js (部分)
<script>/* 兼容H5 手機端 */// --------------------打印字 S--------------------------const words = ["? 囍 ? 茜茜~ 來之程序員的告白(可自定義文字)","? 情書給你一封，情話給你一句，余生給你一人。","? 幻想著和你一起，一日三餐，走過四季，你會是我一生的歸宿。","? 你就是我溫暖的圍巾，冰爽的啤酒，帥氣的領帶，日復一日的夢想。","? 我不擅長戀愛，但我天生愛你。","? 心里若有了良人，眼里的便全是路人。","? 生活到底有多少令人驚喜的饋贈，竟讓我在茫茫人海遇見你，遇見你。","? 有你在的地方，天氣明朗，萬物可愛。","? 酸甜苦辣與你分享，三餐四季與你共度，這才是最美的人間情話。","? 我這一生都是堅定不移的唯物主義者，唯有你，我希望有來生。","? 我們要走到最后，要結婚，要過日子，要相濡以沫，要攜手終身。",];let PPP = 0;let timer;// speed in ms/* 開始編寫文字 */function typingEffect() {var loopTyping = function () {if (word.length > 0) {document.getElementById("word").innerHTML += word.shift();} else {delay(function () {}, deleteDelay); // end delay// deletingEffect();return false;}timer = setTimeout(loopTyping, typeSpeed);};loopTyping();}function deletingEffect() {let word = words[PPP].split("");var loopDeleting = function () {if (word.length > 0) {word.pop();document.getElementById("word").innerHTML = word.join("");} else {typingEffect();return false;}timer = setTimeout(loopDeleting, delSpeed);};loopDeleting();}var delay = (function () {var timer = 0;return function (callback, ms) {clearTimeout(timer);timer = setTimeout(callback, ms);};})();typingEffect();</script>css (3D相冊部分)
body {margin: 0 auto;background: #000;overflow: hidden; }.particle_star {width: 4px;height: 4px;position: absolute;background-color: #ffffff;box-shadow: 0px 0px 17px 4px wheat;border-radius: 50%; }.container {margin: 0 auto;height: 100vh;width: 100vw;position: absolute;overflow: hidden;/* background-size: 100% auto; */background-size: cover;background-repeat: no-repeat;background-image: url("../bg_img/bg.jpg");/* background-image: url("../bg_img/bg2.jpg"); *//* background-image: url("../bg_img/bg3.jpg"); *//* background-image: url("../bg_img/bg4.jpg"); *//* background-image: url("../bg_img/bg6.jpg"); *//* background-image: url("../bg_img/bg7.jpg"); *//* background-image: url("../bg_img/bg8.jpg"); *//* background-image: url("../bg_img/bg9.jpg"); *//* background-image: url("../bg_img/bg10.jpg"); *//* background-image: url("../bg_img/bg11.jpg"); */background-position-x: center; }/*滿天星播放器*/audio {z-index: 5;position: absolute;bottom: 0;opacity: 0.1;-webkit-transition: all 2s;-moz-transition: all 2s;-ms-transition: all 2s;-o-transition: all 2s;transition: all 2s; }audio:hover {opacity: 1; }@keyframes blink {to {opacity: 0;} }.typing {display: flex;top: 10%;left: 4%;z-index: 999999 !important;position: fixed !important; }? 3D相冊更改背景教程
1. 切換背景圖片->教程
2. bg_img 文件下是背景圖片
3. images 文件下是3D相冊 ~直接替換你需要的3D相冊圖片即可, 不需要修改代碼!
二、3D相冊裁剪(教程)
教程如下：需要12張圖片(可自定義12張)
1-6 圖片是大圖 400px*400px ,01-06 圖片是小圖 100px*100px
將準備好的圖片,自行替換 img 文件中的圖片即可!
1.相片裁剪(教程)
首先:下載美圖秀秀/百度下載/或者軟件安裝
或者使用在線鏈接裁剪—> 在線裁剪圖片鏈接
2.美圖秀秀(電腦版)裁剪圖片
2.1選擇圖片裁剪
三、歌曲mp3更換教程(教程)
如需更換mp3背景音樂,可自行下載更換即可~ mp3免費下載地址
1.搜索需要的歌曲
2.下載
3獲取歌曲id
4關注公眾號以后/復制鏈接到瀏覽器打開
5下載mp3 ~下載完畢以后自行替換mp3文件即可(如不想修改代碼,必須保持名稱一致)
四、做好的網頁效果,如何通過發鏈接給別人看?
1.1 解決部署上線~> 部署上線工具(可永久免費使用)
1.不需要買服務器就能部署線上,全世界都能訪問你的連接啦, 這里給大家推薦一個程序員必備神器~
插件集成了超級多好用的插件，免費下載安裝，簡單易懂, 簡直神器 ~ 需要可在文章 ↓ 下方公Z號獲取
2.就是把你的代碼效果做好了以后, 部署到線上, 把鏈接發給別人, 就可以讓對方通過你的連接點擊進去, 就能看到你的網頁效果啦, 電腦端和手機端都可以噢! (不然別人看你的網頁都要發文件過去,體驗感不太好哦~)
1.1部署流程
1.2 哇~ 部署成功
哇~ 部署成功! 將你寫好的頁面部署上線后, 全世界的人都可以通過鏈接訪問到你的網頁了(永久免費使用哦)~
五、前端 零基礎 入門到高級 (視頻+源碼+開發軟件+學習資料+面試題) 一整套 (教程)
適合入門到高級的童鞋們入手~
六、? 源碼獲取
? ~ 關注我，點贊博文~ 每天帶你漲知識!
? 1.看到這里了就 [點贊+好評+收藏] 三連~ 支持下吧，你的「點贊，好評，收藏」是我創作的動力。
? 2.關注我~ 每天帶你學習 :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
? 3.以上內容技術相關問題可以相互學習，可關注↓公Z號 獲取更多源碼 !
七、?更多表白源碼
?100款表白源碼演示地址
總結
以上是生活随笔為你收集整理的制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [Unity Mirror] FAQ
- 下一篇： 牛年除夕福利来啦！