时间：2023-07-26 21:09:02 | 来源：网站运营
时间：2023-07-26 21:09:02 来源：网站运营
制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)：
在线咨询
一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码html+css+javascript 如何实现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><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>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背景音乐,可自行下载更换即可~ mp3免费下载地址 1.搜索需要的歌曲关键词：梦幻,音乐,相册,海洋,浪漫,礼物,生日
