當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)

發(fā)布時(shí)間：2024/3/13 javascript 58 豆豆

生活随笔收集整理的這篇文章主要介紹了制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐) 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

? 制作一個(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è)部分)

<!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><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 (部分)

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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： [Unity Mirror] FAQ
下一篇：用SpringBoot整合ES数据库基础