一行代码教你七夕情人节如何告白❤—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
<> 精彩专栏推荐 文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
作者主页: 【主页——获取更多优质源码】
web前端期末大作业： 【毕设项目精品实战案例 (1000套) 】
程序员有趣的告白方式：【HTML七夕情人节表白网页制作 (110套) 】
超炫酷的Echarts大屏可视化源码：【 Echarts大屏展示大数据平台可视化(150套) 】
HTML+CSS+JS实例代码： 【️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
免费且实用的WEB前端学习指南： 【web前端零基础到高级学习视频教程 120G干货分享】
关于作者: 曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 坚持原创，热衷分享，初心未改，继往开来！
font color = #ff2a4c fsize = 4>❤ 一行代码教你七夕情人节如何告白—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
七夕是中国的情人节，七夕520情人节也是一个非常适合表白的日子，可以把自己平常害怕说出来的话，在这一天说给自己喜欢的人听。明天就是2021年的七夕节了，赶紧行动起来！是不是要给女朋友或者正在追求的妹子一点小惊喜呢! 今天这篇博客就分享下前端代码如何实现漫画3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！
❤ 3D相册效果演示(已兼容PC电脑端/H5手机端)
1.樱花雨表白3D相册–演示地址
2.文字开场白浪漫樱花飘落—演示地址
❉ 1.PC(电脑端)演示
❤动漫3D相册—在线演示地址
❉ 2.H5(手机端)演示
一、文件结构
示例：找到index.html文件下,只需要修改文字即可
❉ HTML 相册
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>七夕情人节- 动漫3D相册告白</title> <!-- 播放器css --> <link rel="stylesheet" href="./css/common.css" /> <!-- 相册css --> <link type="text/css" href="./css/style.css" rel="stylesheet" /> </head> <body> <!-- 烟花 --> <canvas class="raining"></canvas> <!-- 打字 --> <div class="typing"> <!-- 字幕 --> <h2 class="header-sub-title" id="word"></h2> <h2 class="header-sub-title blink">|</h2> </div> <!-- 相册 --> <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 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="./azn.mp3" loop="loop" ></audio> <div class="backimg"></div> </body> <html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102❉ JS 文字打印
// -----------打印字----------- const words = [ "❤亲爱的,今天是我们在一起的第520天", "❉ 月梅星稀鸣蝉哀，胡琴曲幽谁人拉", "❉ 今夜无人盈袖拂，时逢科举缘是由", "❉ 你的笑，我无法忘掉", "❉ 你的好，温暖我心潮", "❉ 你的美，如秋月皎皎", "❉ 我的爱，如秋水淼淼", "❉ 陪着你一直到老", "❉ 亲爱的，七夕到了", "❉ 陪着你度过生命中的每一个七夕", ]; let i = 0; let timer; let deleteDelay = 3000; /* 开始编写文字 */ function typingEffect() { let word = words[i].split(""); var loopTyping = function () { if (word.length > 0) { document.getElementById("word").innerHTML += word.shift(); } else { delay(function () { deletingEffect(); }, deleteDelay); return false; } timer = setTimeout(loopTyping, typeSpeed); }; } function deletingEffect() { let word = words[i].split(""); var loopDeleting = function () { if (word.length > 0) { word.pop(); document.getElementById("word").innerHTML = word.join(""); } else { if (words.length > i + 1) { i++; } else { i = 0; } typingEffect(); return false; } var delay = (function () { var timer = 0; return function (callback, ms) { clearTimeout(timer); timer = setTimeout(callback, ms); }; })(); /* 开始打印字 */ typingEffect();
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758❉ JS 烟花泡泡 </ font >
/* 烟花 */ var canvas = document.querySelector(".raining"); var w, h; ~~ function setSize() { //定义canvas的宽高，让他跟浏览器的窗口的宽高相同 window.onresize = arguments.callee; w = window.innerWidth; h = window.innerHeight; canvas.width = w; canvas.height = h; }(); move: function() { //重点是判断和初始位置。其他无大变化 if (this.y > this.h) { //位置判断 this.y += -this.vy; //从下往上 } else { if (this.r < 100) { //绽放的大小 this.r += this.vr; } else { this.init(); //放完后回归变量原点 } } this.draw(); //开始作画 } } function createrain(num) { for (var i = 0; i < num; i++) { setTimeout(function() { var raing = new rain(); //创建一滴雨 raing.init(); raing.draw(); arain.push(raing); }, 800 * i) //每隔150ms下落一滴雨 } } createrain(10); //雨滴数量 setInterval(function() { canCon.fillStyle = "rgba(0,0,0,0.1)"; //拿起一支透明0.13的笔 canCon.fillRect(0, 0, w, h); //添加蒙版 控制雨滴长度 for (var item of arain) { //item of arain指的是数组里的每一个元素 //item in arain指的是数组里的每一个元素的下标（包括圆形连上的可遍历元素） item.move(); //运行整个move事件 } }, 1000 / 60); //上升时间
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748三、3D相册裁剪(教程)
教程如下：需要12张图片, 1-6 图片是大图 400px400px ,01-06 图片是小图 100px100px
将准备好的图片,自行替换 img 文件中的图片即可!
❉ 1.相片裁剪(教程)
1.1首先:下载美图秀秀/百度下载/或者软件安装
1.2或者使用在线链接裁剪—> 在线裁剪图片链接
❉ 2.美图秀秀(电脑版)裁剪图片
2.1选择图片裁剪
四、歌曲mp3更换教程(教程)
如需更换mp3背景音乐,可自行下载更换即可~ mp3免费下载地址
❉ 1.搜索歌曲
❉ 2.下载歌曲
❉ 3.获取歌曲
❉ 4.保存歌曲
关注公众号以后/复制链接到浏览器打开
1.5下载mp3 ~下载完毕以后自行替换mp3文件即可(如不想修改代码,必须保持名称一致)
五、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、 源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉ 1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉ 3.以上内容技术相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
七、更多表白源码
1.❤100款 html+css+JavaScript 表白源码演示地址
2.❤520情人节送女朋友的生日礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
3. 一行代码教你撩妹手到擒来~html+css+js烟花告白3D相册(含音乐+可自定义文字)
4. ❤520给她准备的情人节礼物~html+css+javascript漫天飞雪3D相册(含音乐)
5. ❤520情人节陪她一起看流星雨~html+css+javascript制作流星雨3D相册(含音乐)
6. html+css+js生日快乐网站模板 (520/七夕情人节/告白/求婚/生日快乐) 含背景音乐
7. html+css+js生日快乐~程序员专属的生日快乐html模板(含生日背景音乐)
8. ❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备
9. 我是如何用一行代码表白学妹❤520情人节送女朋友的3D樱花雨相册礼物❤(程序员表白专属)
10. 七夕情人节~html+css+javascript实现满屏爱心特效(程序员表白)
11. 七夕情人节送花告白动画(HTML+CSS+JavaScript)
12. html+css+js制作结婚倒计时网页模板(520/七夕情人节/程序员告白)
13. html+css+javascript制作爱心表白代码(520/七夕情人节/告白/生日礼物)
14. 超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节
15. html+css+javascript实现100款超炫酷告白源码(520/七夕/告白/求婚/脱单)程序员必备
16. html+css+javascript实现520告白爱情树(含音乐)程序员表白必备
17. html+css+javaScript实现炫酷烟花表白(云雾状粒子文字3D开场)
18. 程序员520告白Html+Js+Css花瓣相册网页模板❤程序员表白必备
19. html+css+javascript实现乾坤八卦风水罗盘时钟 (免费附源码)
20. html+css+javascript实现抖音超火罗盘时钟 (免费附源码)
21. 抖音超火JavaScript实现网红太空人表盘 ~看程序员是如何用代码做华为太空手表
22. html+css+js绘制冬季下雪3D相册(520情人节/七夕情人节/程序员表白html代码)
23. 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)
24. html+css+js制作520表白网页，全屏的爱心和表白语网页动画代码，浪漫的520爱心表白动画特效。
25. 520情人节程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)
26. Html5浪漫结婚请柬婚礼网站模板❤_爱她就给她最美的H5婚礼请柬_(婚庆电子邀请函)含背景音乐
27. html+css+javascript满屏雪花爱心520表白网站 (含音乐)520告白/七夕情人节/生日礼物/程序员表白必备
28. 520七夕情人节那天我用代码给女朋友送了一个礼物~html+css+javascript实现樱花爱心相册「可以拿去送给自己喜欢的人」
29. 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
30. html+css+javascript生日快乐烟花 ❤520/表白/七夕情人节/求婚❤专用(自定义文字)
31. 基于Echarts实现可视化数据大屏展示(150套)——制作深蓝色科技感物流云数据看板页面模板
相关知识
HTML5七夕情人节表白网页制作 (浪漫的求婚动画) HTML+CSS+JavaScript
七夕情人节送花告白动画(HTML+CSS+JavaScript)
100款 ❤HTML5七夕情人节表白网页源码❤ HTML+CSS+JavaScript 【建议收藏】
HTML5七夕情人节表白网页制作【css求婚动画源码】HTML+CSS+JavaScript 程序员表白代码
HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)
HTML5七夕情人节表白网页制作【HTML5庆祝生日蛋糕烟花特效】HTML+CSS+JavaScript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
HTML5期末大作业：鲜花主题网页设计——简约的网上花店网站设计(4页) HTML+CSS+JavaScript
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
web网页设计实例作业 ：鲜花商城网站主题——浪漫红色大气自适应网上鲜花店网页设计(16页) HTML+CSS+JavaScript
网址: 一行代码教你七夕情人节如何告白❤—动漫3D相册(音乐+文字)HTML+CSS+JavaScript https://www.huajiangbk.com/newsview792689.html
| 上一篇: 《华语音乐》萧亚轩《表白》官方版 |
下一篇: HTML超级浪漫的独一无二的爱心 |
推荐分享
- 1君子兰什么品种最名贵 十大名 4012
- 2世界上最名贵的10种兰花图片 3364
- 3花圈挽联怎么写？ 3286
- 4迷信说家里不能放假花 家里摆 1878
- 5香山红叶什么时候红 1493
- 6花的意思,花的解释,花的拼音 1210
- 7教师节送什么花最合适 1167
- 8勿忘我花图片 1103
- 9橄榄枝的象征意义 1093
- 10洛阳的市花 1039
