首页分享一行代码教你撩妹手到擒来❤html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚

一行代码教你撩妹手到擒来❤html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚

来源：花匠小妙招时间：2024-12-01 08:16

❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字)

一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！

❉ 文章目录 ❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字)❉ 前言❉ 更多告白演示1. 单相片演示(已兼容H5手机和PC电脑)2. 多相片演示(已兼容H5手机和PC电脑) ❉ 代码文件目录一、文字修改(代码实现) 二、3D相册(代码实现) html (字幕部分)html (3D相册)html (文字打印)html (播放器)js(文字打印)js (烟花效果实现) 三、3D相册裁剪(教程) 1.相片裁剪(教程)2.美图秀秀(电脑版)裁剪图片四、歌曲mp3更换教程(教程)五、做好的网页效果,如何通过发链接给别人看?1.1 解决部署上线~> 部署上线工具(可永久免费使用)1.1部署流程1.2 哇~ 部署成功六、前端零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 七、❉ 源码获取八、❉更多表白源码

❉ 前言

520/七夕情人节表白[满屏烟花3D相册],程序员也可以很浪漫哦 ! 程序员向妹子表白专用代码!❤
HTML+css3+js 抖音很火的3d旋转相册-包含音乐,(送女友,表白,生日)动态生成效果,这样制作的~,现在,越来越多的人喜欢用视频记录生活,照片多的友友也会选择制作动态相册视频,不仅创意十足,同时还能展现自我风采, 撩妹神器哦!

❉ 更多告白演示

2.樱花雨3D相册演示地址
3.文字开场白+浪漫樱花飘落演示地址

1. 单相片演示(已兼容H5手机和PC电脑)

在这里插入图片描述

2. 多相片演示(已兼容H5手机和PC电脑)

在这里插入图片描述

❉ 代码文件目录

在这里插入图片描述

一、文字修改(代码实现)

示例：找到index.html文件中的script标签下 words字段,只需要修改文字就行~
在这里插入图片描述

二、3D相册(代码实现)

html (字幕部分)

<div class="typing">  <h2 class="header-sub-title" id="word"></h2> <h2 class="header-sub-title blink">|</h2> </div> 1234567

html (3D相册)

<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>

1234567891011121314151617181920

html (文字打印)

<div class="typing">  <h2 class="header-sub-title" id="word"></h2> <h2 class="header-sub-title blink">|</h2> </div> 1234567

html (播放器)

<div id="app"> <div class="container_player"> <div class="music-box">  <img src="img/01.png" /> <div class="mask"> <div class="mplayer" onclick="play()"> <i class="fa"> <span class="before"></span> <span class="after"> </span> </i> <svg class="loadingSvg" width="25" height="25" viewBox="0,0,50,50" style=" position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); " > <circle></circle> </svg> </div> <div class="m-circle m-progress"> <svg width="163" height="163" viewBox="0,0,163,163"> <circle cx="81" cy="81" r="159" stroke-width="8" stroke="rgba(255, 206, 113, 0.2)" fill="rgba(0,0,0,.2)" ></circle> <circle class="a" cx="81" cy="81" r="159" stroke-width="6" stroke="rgba(255, 206, 113, 1)" fill="none" stroke-dasharray="0 999" transform="matrix(0,-1,1,0,0,163)" ></circle> </svg> </div> <div class="m_time"> <span class="mplayer_curtime">00:00</span> <span class="m-join">/</span> <span class="mplayer_durtime">00:00</span> </div> </div> </div> </div> </div>  <audio id="myAudio" src="music/yinyue.mp3"></audio>

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162

js(文字打印)

/* 只需要修改这里的文字就行 */ <script> // 打印字 const words = [ "❤2021.5.20与你相爱 1314天~", "❉你的微笑，是我这辈子见过最美的景色。", "❉我想收藏这样的风景一辈子。", "❉我的人生放荡不羁，不曾为谁停留，", "❉但自从遇到你，我会用余生来守护你。", "❉我不想做你人生的插曲，", "❉我想成为你一生的主题曲。", "❤我爱你❤。", ]; let i = 0; let timer; // 速度 let deleteDelay = 3000; let typeSpeed = 100; let delSpeed = 50; /* 开始编写文字 */ function typingEffect() { let word = words[i].split(""); var loopTyping = function () { if (word.length > 0) { document.getElementById("word").innerHTML += word.shift(); } else { delay(function () { deletingEffect(); // do stuff }, deleteDelay); // end delay // deletingEffect(); return false; } timer = setTimeout(loopTyping, typeSpeed); }; loopTyping(); } /* 开始编写文字 */ typingEffect(); </script>

12345678910111213141516171819202122232425262728293031323334353637383940