一行代码教你七夕情人节如何告白❤—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
❤ 一行代码教你七夕情人节如何告白—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
七夕是中国的情人节,七夕520情人节
也是一个非常适合表白的日子,可以把自己平常害怕说出来的话,在这一天说给自己喜欢的人听。明天就是2021年的七夕节了
,赶紧行动起来!是不是要给女朋友或者正在追求的妹子一点小惊喜呢! 今天这篇博客就分享下前端代码如何实现漫画3D立体动态相册
。赶紧学会了,来制作属于我们程序员的浪漫吧!
❉ 文章目录
- ❤ 一行代码教你七夕情人节如何告白—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
- ❤ 3D相册效果演示(已兼容PC电脑端/H5手机端)
- ❉ 1.PC(电脑端)演示
- ❉ 2.H5(手机端)演示
- 一、文件结构
- 二、3D相册告白(教程)
- ❉ HTML 相册
- ❉ JS 文字打印
- ❉ JS 烟花泡泡
- 三、3D相册裁剪(教程)
- ❉ 1.相片裁剪(教程)
- ❉ 2.美图秀秀(电脑版)裁剪图片
- 四、歌曲mp3更换教程(教程)
- ❉ 1.搜索歌曲
- ❉ 2.下载歌曲
- ❉ 3.获取歌曲
- ❉ 4.保存歌曲
- 五、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
- 六、 源码获取
- 七、更多表白源码
❤ 3D相册效果演示(已兼容PC电脑端/H5手机端)
1.樱花雨表白3D相册–演示地址
2.文字开场白浪漫樱花飘落—演示地址
❉ 1.PC(电脑端)演示
❤动漫3D相册—在线演示地址
❉ 2.H5(手机端)演示
一、文件结构
二、3D相册告白(教程)
示例:找到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><svgclass="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"><circlecx="81"cy="81"r="159"stroke-width="8"stroke="rgba(255, 206, 113, 0.2)"fill="rgba(0,0,0,.2)"></circle><circleclass="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>
❉ 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();
❉ 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); //上升时间
三、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套)——制作深蓝色科技感物流云数据看板页面模板
一行代码教你七夕情人节如何告白❤—动漫3D相册(音乐+文字)HTML+CSS+JavaScript相关推荐
- ❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript
❀ 520七夕情人节告白网页代码❀-浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端大气上档次的D立体动 ...
- HTML5七夕情人节表白网页(流星动画3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤流星动画3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是 ...
- HTML5七夕情人节表白网页(爱心雨-满屏爱心飘落)HTML+CSS+JavaScript
HTML5七夕情人节表白网页❤(爱心雨-满屏爱心飘落)❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
- HTML5七夕情人节表白网页_圣诞节3d相册(含音乐开关)_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤圣诞节3d相册(含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱 ...
- HTML5七夕情人节表白网页_圣诞节3d相册(含音乐)_HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤圣诞节3d相册(不含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css ...
- HTML5七夕情人节表白网页制作【圣诞雪花飘落】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- 教你如何制作浪漫的3D相册表白网站 HTML+CSS+JavaScript
❤ 精彩专栏推荐
- 一行代码教你撩妹手到擒来❤html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
- 一行代码教你撩妹手到擒来html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚...
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
最新文章
- 微软采购amd服务器芯片,微软计划自研PC和服务器芯片 英特尔AMD股价应声下跌
- 备战金九银十,阿里P8师兄指导完整攻略(附:学习资料+面试宝典+项目实战笔记)
- 太阳能正在崛起 光伏养老蔚然成风
- 《需求设计:构建用户想要和需要的产品》——第1章 情境驱动设计入门1.1 对需求进行设计...
- python千位分隔符_python – 为pandas数据帧中的整数设置千位分隔符
- Cinder - 云硬盘加密
- lacp静态和动态区别_静态人脸识别和动态人脸识别有哪些区别
- 使用koa托管静态资源文件
- 计算机二级选择题题库及答案office,计算机二级选择题题库及答案
- ios共享账号公众号_新增iOS应用账号共享03
- CGLIB代理使用与原理详解
- 数据分析——常见数据指标汇总
- 【C语言】求最大值 (完整代码)
- 基于matlab水轮机期刊,四川紫坪铺电站水轮机综合特性三维建模
- 在线客服系统对接微信小程序(客服消息推送)
- 数字图像处理(5)- 图像恢复
- android 一直开机画面,解决:Android模拟器一直停留在开机画面
- 【Gym 102893 L】The Firm Knapsack Problem (贪心)
- 清华计算机科学与技术专业收分,清华大学计算机科学与技术系2020研究生复试分数线...
- 树莓派安装ubuntu18.04