好好活就是有意义的事,有意义的事就是好好活
使用前端技术, 制作3D立体动态樱花相册
使用前端技术, 制作3D立体动态樱花相册

使用前端技术, 制作3D立体动态樱花相册

前言

效果如下:

本文的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的录制功能, 然后用抖音的剪影

自定义的相册如何在手机上打开

如果你想让全国人民都看到, 那么需要云服务器

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注