❤520给她准备的情人节礼物~html+css+javascript漫天飞雪3D相册(含音乐)
❤520给她准备的情人节礼物~html+css+javascript漫天飞雪3D相册(含音乐/可自定义文字) ~程序员表白必备
一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白
,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码html+css+javascript 如何实现3D立体动态相册。赶紧学会了,来制作属于我们程序员的浪漫吧!
告白前, 我们的留言区开放给你!快来秀出你的别样表白方式,和你心仪的那个ta表白吧!
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
@TOC
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
前言
对于程序员来说,“单身”依然是人生最大的 bug,关键是还无法调试。虽然俗话说“自古英雄多寂寞”,但是缺少另一半的人生总是不完整的。况且,距离一年一度的情(虐)人(狗)节不远了。
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
漫天飞雪3D相册/含背景音乐/可自定义文字具有背景颜色渐变
漫天飞雪3D相册-在线演示地址
1. PC(电脑端)演示
2. H5(手机端)演示
❉代码文件目录
一、3D相册(代码实现)
html (3D相册部分)
<!-- 白雪花飘落 --><div class="drop"></div><!-- 打字 --><div class="typing"><!-- 字幕 --><h2 class="header-sub-title" id="word"></h2><h2 class="header-sub-title blink">|</h2></div><!-- 星空 --><div class="landscape"></div><div class="filter"></div><canvas id="canvas"></canvas><!-- 自动播放 --><!-- 相册 --><div id="jsi-snow-container" class="container"></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>
js (满天星部分)
文字打印(找到index.html下) 文字修改即可
<script>var d = "<div class='maple'>❄<div>";setInterval(function () {var f = $(document).width();var e = Math.random() * f - 300; // 雪花的定位left值var o = 0.2 + Math.random(); // 雪花的透明度var fon = 25 + Math.random() * 10; // 雪花大小var l = e - 100 + 200 * Math.random(); // 雪花的横向位移var k = 8000 + 5000 * Math.random();var deg = Math.random() * 360; // 雪花的方向$(d).clone().appendTo(".maplebg").css({left: e + "px",opacity: o,transform: "rotate(" + deg + "deg)","font-size": fon,}).animate({top: "550px",left: l + "px",opacity: 0.1,},k,"linear",function () {$(this).remove();});}, 500);</script>
css (3D相册部分)
.box {width: 200px;height: 200px;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;position: absolute;margin-left: 42%;margin-top: 22%;-webkit-transform-style: preserve-3d;-webkit-transform: rotateX(13deg);-webkit-animation: move 5s linear infinite;
}
.minbox li:nth-child(1) {background: url(../img/01.png) no-repeat 0 0;-webkit-transform: translateZ(50px);
}
.minbox li:nth-child(2) {background: url(../img/02.png) no-repeat 0 0;-webkit-transform: rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3) {background: url(../img/03.png) no-repeat 0 0;-webkit-transform: rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4) {background: url(../img/04.png) no-repeat 0 0;-webkit-transform: rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5) {background: url(../img/05.png) no-repeat 0 0;-webkit-transform: rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6) {background: url(../img/06.png) no-repeat 0 0;-webkit-transform: rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1) {background: url(../img/1.png) no-repeat 0 0;-webkit-transform: translateZ(50px);
}
.maxbox li:nth-child(2) {background: url(../img/2.png) no-repeat 0 0;-webkit-transform: translateZ(50px);
}
.maxbox li:nth-child(3) {background: url(../img/3.png) no-repeat 0 0;-webkit-transform: rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4) {background: url(../img/4.png) no-repeat 0 0;-webkit-transform: rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5) {background: url(../img/5.png) no-repeat 0 0;-webkit-transform: rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6) {background: url(../img/6.png) no-repeat 0 0;-webkit-transform: rotateY(90deg) translateZ(50px);
}
.maxbox {width: 800px;height: 400px;position: absolute;left: 0;top: -20px;-webkit-transform-style: preserve-3d;
}
.maxbox li {width: 200px;height: 200px;background: #fff;border: 1px solid #ccc;position: absolute;left: 0;top: 0;opacity: 0.2;-webkit-transition: all 1s ease;
}
.maxbox li:nth-child(1) {-webkit-transform: translateZ(100px);
}
.maxbox li:nth-child(2) {-webkit-transform: rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3) {-webkit-transform: rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4) {-webkit-transform: rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5) {-webkit-transform: rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6) {-webkit-transform: rotateY(90deg) translateZ(100px);
}
二、3D相册裁剪(教程)
教程如下:需要12张图片(可自定义12张)
1-6 图片是大图 400px*400px
,01-06 图片是小图 100px*100px
将准备好的图片,自行替换 img 文件中的图片即可!
1.相片裁剪(教程)
首先:下载美图秀秀/百度下载/或者软件安装
或者使用在线链接裁剪---> 在线裁剪图片链接
2.美图秀秀(电脑版)裁剪图片
2.1选择图片裁剪
三、歌曲mp3更换教程(教程)
如需更换mp3
背景音乐,可自行下载更换即可~ mp3免费下载地址
1.搜索需要的歌曲
2.下载
3获取歌曲id
4关注公众号以后/复制链接到浏览器打开
5下载mp3 ~下载完毕以后自行替换mp3文件即可(如不想修改代码,必须保持名称一致)
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
四、做好的网页效果,如何通过发链接给别人看?
1.1 解决部署上线~> 部署上线工具(可永久免费使用)
1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~
插件集成了超级多好用的插件,免费下载安装,简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取
2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)
1.1部署流程
1.2 哇~ 部署成功
哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
五、前端 零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
六、❉源码获取
❉ ~ 关注我,点赞博文~ 每天带你涨知识!
❉ 1.看到这里了就 [点赞+好评+收藏] 三连~ 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
❉3.以上内容技术相关问题可以相互学习,可关注↓公Z号 获取更多源码 !
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
七、❉更多表白源码
❤100款表白源码演示地址
❤520给她准备的情人节礼物~html+css+javascript漫天飞雪3D相册(含音乐)相关推荐
- ❤520情人节陪她一起看流星雨~html+css+javascript制作流星雨3D相册(含音乐)
❉ 520情人节陪她一起看流星雨~html+css+javascript流星雨3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹 ...
- 一行代码教你撩妹手到擒来❤html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
- 一行代码教你撩妹手到擒来html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚...
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
- 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一 ...
- ❤520情人节送女朋友的生日礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
❉ 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹 ...
- 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
❉ 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追 ...
- 520情人节程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)
❉ 来自程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)可自定义编辑文字 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白,是不是要给 ...
- 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爱 ...
- 专属程序员的浪漫520情人节送女朋友的生日祝福樱花雨3D相册
专属程序员的浪漫520情人节送女朋友的生日祝福樱花雨3D相册
最新文章
- TinyMCE的使用
- 技术方案包括哪些内容_揭秘:网络营销推广方案的内容包括哪些?
- 什么是整除,什么是素数
- 自动推荐图表、智能分析,这个新出的分析工具有点酷!
- PHP读取数据库并按照中文名称进行排序实现代码
- spearman相关性分析_「同学交大经金考研」西安交通大学432统计学-必考简答题4:spearman等级相关系数...
- linux开机自启服务命令,linux开机自启服务命令
- 用ASP.NET Core 2.0 建立规范的 REST API -- GET 和 POST
- 编程基本功:如何拆分一个大函数
- 黑马程序员视频加源码
- Python版蚊子大作战源代码,超解压的灭蚊小游戏,多种道具
- 《python3网络爬虫开发实战》学习笔记:pyspider报错Exception: HTTP 599: SSL certificate problem...
- 设置及清除Excel打开密码的两种方法
- manchi翻译中文 mi_求这一段意大利文歌词中文翻译(MiManchi)?
- 假装接入阿里云---PC运行mqtt.fx
- SpringBoot的个人博客管理系统(毕业论文范文)
- 为什么程序员适合做自由职业者
- gta5的服务器状态,Gta5OL一直处于加载过程中,你可能遇到了这些问题
- 摒除GITHUB“祸害”,跟GITHUB说拜拜 Fcloud自由安全的栖息之地
- adb安装应用限制解除
热门文章
- 现代软件工程讲义 7 设计阶段 典型用户 - 故事 - 任务 - 具体工作
- jQuery Ajax async=false异步改为同步时,导致浏览器假死的处理方法
- 计算机科学成为独立学科的奠基人,详解卡内基梅隆大学计算机学院
- Wireshark菜单栏介绍
- 计算机毕业设计ssm筋斗租车系统d0733系统+程序+源码+lw+远程部署
- Linux下恢复误删的文件
- twitter_关于Twitter和激进化的警告
- 通向大规模医疗知识图谱:万字详解天衍实验室知识图谱对齐技术
- 大学生bootstrap框架网页作业成品 bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品
- 玻璃盖板丝印质量及尺寸在线检测方案