時(shí)間：2023-07-26 21:09:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-26 21:09:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)
制作一個(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)制作屬于我們程序員的浪漫吧！ <!-- * @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><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>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;}400px*400px ,01-06 圖片是小圖 100px*100pxmp3背景音樂(lè),可自行下載更換即可~ mp3免費(fèi)下載地址 1.搜索需要的歌曲關(guān)鍵詞：夢(mèng)幻,音樂(lè),相冊(cè),海洋,浪漫,禮物,生日
客戶&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
客戶&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
