javascript
制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)
? 制作一個(gè)浪漫溫馨的生日禮物送她~html+css+javascript藍(lán)色夢(mèng)幻海洋3D相冊(cè)(含音樂(lè))
一年一度的/520情人節(jié)/七夕情人節(jié)/生日禮物/告白師妹/程序員表白,是不是要給女朋友或者正在追求的妹子一點(diǎn)小驚喜呢,今天這篇博客就分享下前端代碼html+css+javascript 如何實(shí)現(xiàn)3D立體動(dòng)態(tài)相冊(cè)。趕緊學(xué)會(huì)了,來(lái)制作屬于我們程序員的浪漫吧!
? 文章目錄
- ? 制作一個(gè)浪漫溫馨的生日禮物送她~html+css+javascript藍(lán)色夢(mèng)幻海洋3D相冊(cè)(含音樂(lè))
- ? 前言
- ? 3D相冊(cè)演示(含背景音樂(lè))可自定義12張相片
- 1. 10款靜態(tài)演示
- 2. 10款動(dòng)態(tài)演示
- ? 代碼文件目錄
- 一、3D相冊(cè)(代碼實(shí)現(xiàn))
- html (3D相冊(cè)部分)
- js (部分)
- css (3D相冊(cè)部分)
- ? 3D相冊(cè)更改背景教程
- 二、3D相冊(cè)裁剪(教程)
- 1.相片裁剪(教程)
- 2.美圖秀秀(電腦版)裁剪圖片
- 三、歌曲mp3更換教程(教程)
- 四、做好的網(wǎng)頁(yè)效果,如何通過(guò)發(fā)鏈接給別人看?
- 1.1 解決部署上線~> 部署上線工具(可永久免費(fèi)使用)
- 1.1部署流程
- 1.2 哇~ 部署成功
- 五、前端 零基礎(chǔ) 入門(mén)到高級(jí) (視頻+源碼+開(kāi)發(fā)軟件+學(xué)習(xí)資料+面試題) 一整套 (教程)
- 六、? 源碼獲取
- 七、?更多表白源碼
? 前言
520/七夕情人節(jié)表白[櫻花飄落3D相冊(cè)],程序員也可以很浪漫哦 ! 程序員向妹子表白專(zhuān)用代碼!?
HTML+css3+js 抖音很火的3d旋轉(zhuǎn)相冊(cè)-包含音樂(lè),(送女友,表白,生日)動(dòng)態(tài)生成效果,這樣制作的~,現(xiàn)在,越來(lái)越多的人喜歡用視頻記錄生活,照片多的友友也會(huì)選擇制作動(dòng)態(tài)相冊(cè)視頻,不僅創(chuàng)意十足,同時(shí)還能展現(xiàn)自我風(fēng)采, 撩妹神器哦!
? 3D相冊(cè)演示(含背景音樂(lè))可自定義12張相片
1. 藍(lán)色夢(mèng)幻海洋3D相冊(cè)->在線演示地址
2.(生日快樂(lè))蛋糕煙花+藍(lán)色夢(mèng)幻海洋3D相冊(cè)–>在線演示地址
1. 10款靜態(tài)演示
2. 10款動(dòng)態(tài)演示
? 代碼文件目錄
一、3D相冊(cè)(代碼實(shí)現(xiàn))
html (3D相冊(cè)部分)
<!--* @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藍(lán)色夢(mèng)幻海洋網(wǎng)頁(yè)特效\index.html --> <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><title>浪漫海洋夢(mèng)幻告白3D相冊(cè)</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><!-- 相冊(cè) --><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 手機(jī)端 */// --------------------打印字 S--------------------------const words = ["? 囍 ? 茜茜~ 來(lái)之程序員的告白(可自定義文字)","? 情書(shū)給你一封,情話給你一句,余生給你一人。","? 幻想著和你一起,一日三餐,走過(guò)四季,你會(huì)是我一生的歸宿。","? 你就是我溫暖的圍巾,冰爽的啤酒,帥氣的領(lǐng)帶,日復(fù)一日的夢(mèng)想。","? 我不擅長(zhǎng)戀愛(ài),但我天生愛(ài)你。","? 心里若有了良人,眼里的便全是路人。","? 生活到底有多少令人驚喜的饋贈(zèng),竟讓我在茫茫人海遇見(jiàn)你,遇見(jiàn)你。","? 有你在的地方,天氣明朗,萬(wàn)物可愛(ài)。","? 酸甜苦辣與你分享,三餐四季與你共度,這才是最美的人間情話。","? 我這一生都是堅(jiān)定不移的唯物主義者,唯有你,我希望有來(lái)生。","? 我們要走到最后,要結(jié)婚,要過(guò)日子,要相濡以沫,要攜手終身。",];let PPP = 0;let timer;// speed in ms/* 開(kāi)始編寫(xiě)文字 */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相冊(cè)部分)
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相冊(cè)更改背景教程
1. 切換背景圖片->教程
2. bg_img 文件下是背景圖片
3. images 文件下是3D相冊(cè) ~直接替換你需要的3D相冊(cè)圖片即可, 不需要修改代碼!
二、3D相冊(cè)裁剪(教程)
教程如下:需要12張圖片(可自定義12張)
1-6 圖片是大圖 400px*400px ,01-06 圖片是小圖 100px*100px
將準(zhǔn)備好的圖片,自行替換 img 文件中的圖片即可!
1.相片裁剪(教程)
首先:下載美圖秀秀/百度下載/或者軟件安裝
或者使用在線鏈接裁剪—> 在線裁剪圖片鏈接
2.美圖秀秀(電腦版)裁剪圖片
2.1選擇圖片裁剪
三、歌曲mp3更換教程(教程)
如需更換mp3背景音樂(lè),可自行下載更換即可~ mp3免費(fèi)下載地址
1.搜索需要的歌曲
2.下載
3獲取歌曲id
4關(guān)注公眾號(hào)以后/復(fù)制鏈接到瀏覽器打開(kāi)
5下載mp3 ~下載完畢以后自行替換mp3文件即可(如不想修改代碼,必須保持名稱一致)
四、做好的網(wǎng)頁(yè)效果,如何通過(guò)發(fā)鏈接給別人看?
1.1 解決部署上線~> 部署上線工具(可永久免費(fèi)使用)
1.不需要買(mǎi)服務(wù)器就能部署線上,全世界都能訪問(wèn)你的連接啦, 這里給大家推薦一個(gè)程序員必備神器~
插件集成了超級(jí)多好用的插件,免費(fèi)下載安裝,簡(jiǎn)單易懂, 簡(jiǎn)直神器 ~ 需要可在文章 ↓ 下方公Z號(hào)獲取
2.就是把你的代碼效果做好了以后, 部署到線上, 把鏈接發(fā)給別人, 就可以讓對(duì)方通過(guò)你的連接點(diǎn)擊進(jìn)去, 就能看到你的網(wǎng)頁(yè)效果啦, 電腦端和手機(jī)端都可以噢! (不然別人看你的網(wǎng)頁(yè)都要發(fā)文件過(guò)去,體驗(yàn)感不太好哦~)
1.1部署流程
1.2 哇~ 部署成功
哇~ 部署成功! 將你寫(xiě)好的頁(yè)面部署上線后, 全世界的人都可以通過(guò)鏈接訪問(wèn)到你的網(wǎng)頁(yè)了(永久免費(fèi)使用哦)~
五、前端 零基礎(chǔ) 入門(mén)到高級(jí) (視頻+源碼+開(kāi)發(fā)軟件+學(xué)習(xí)資料+面試題) 一整套 (教程)
適合入門(mén)到高級(jí)的童鞋們?nèi)胧謣
六、? 源碼獲取
? ~ 關(guān)注我,點(diǎn)贊博文~ 每天帶你漲知識(shí)!
? 1.看到這里了就 [點(diǎn)贊+好評(píng)+收藏] 三連~ 支持下吧,你的「點(diǎn)贊,好評(píng),收藏」是我創(chuàng)作的動(dòng)力。
? 2.關(guān)注我~ 每天帶你學(xué)習(xí) :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開(kāi)發(fā)者,一起探討 前端 Node 知識(shí),互相學(xué)習(xí)」!
? 3.以上內(nèi)容技術(shù)相關(guān)問(wèn)題可以相互學(xué)習(xí),可關(guān)注↓公Z號(hào) 獲取更多源碼 !
七、?更多表白源碼
?100款表白源碼演示地址
總結(jié)
以上是生活随笔為你收集整理的制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: [Unity Mirror] FAQ
- 下一篇: 用SpringBoot整合ES数据库基础