前言
效果如下:
本文的3D效果, 参考了此教程:抖音上很火的3D立体动态相册blog.csdn.net/jdk_wangtaida/article/details/103253883
樱花效果, 参考了此教程:樱花飘落特效blog.csdn.net/weixin_43701595/article/details/106728106
是的, 我就是缝合了一下, 然后解决了其中的诸多Bug, 如手机端的显示问题等!
最终的效果, 可以访问:
如果显示没有备案, 可以访问:
获取源码
git
git clone https://github.com/Kingdo777/3D-Photo-Album下载链接
当然, 如果你没有计算机基础, 可以直接点击下载:
或:
代码结构
直接点击index.html即可呈现与前文中相同效果.
定制自己的相册
改代码
代码我已经进行了排错和优化, 一般正常运行都不会存在什么问题, 因此基本上是不需要修改的.
大家只需要替换掉img目录中的图片即可, 但是不要修改图片的命名.
如果非要修改, 那么就要修改HTML文件中相应的位置:
图片显示与命名
- 1-6.png是外面的大方块;
- 01-06.png是里面的小方块.
图片规格
最好的长宽相等, 大小无所谓. 如:
后记
移动端显示
- 安卓, 苹果的浏览器上都是正常的
- 苹果QQ内置的浏览器没有问题
- 苹果微信内置的浏览器显示存在问题
如何快速的裁剪图片
可以用Windows 自带的画图工具
一开始的演示视频是怎么录制的
用PPT的录制功能, 然后用抖音的剪影
自定义的相册如何在手机上打开
如果你想让全国人民都看到, 那么需要云服务器