动态3D相册

最新推荐文章于 2024-05-18 16:42:38 发布
最新推荐文章于 2024-05-18 16:42:38 发布
阅读量102 收藏
点赞数
分类专栏： JavaScript 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/victoryzyd/article/details/122247225
版权

百度网盘链接：链接：https://pan.baidu.com/s/1t92S8fTu_syNdjXMo9I36A
提取码：Null

Null_zyd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
送给女朋友的3D立体动态相册.zip
03-09
这是一个送给女朋友的3D立体动态相册，现在分享给大家，希望大家可以通过此文件了解到编程的乐趣，同时也希望兄弟们都可以追上自己心仪的那个Ta
立体创意相册-感动女友相册-3D旋转图片
weixin_43474701的博客
07-31 539
3D旋转图片相册-创意相册-感动女友相册 赶紧做一个给你的女友趴，效果如下动态图： 文件目录结构 HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link type="text/css" href="css/style.css" rel="stylesheet" /> </head&gt
超简单：很火的3D立体动态相册，送给心爱的那个人
weixin_45512136的博客
10-14 1434
1.首先，我们一共需要三个文件，目录关系如下所示。先建index.html文件吧，电脑上先创建一个.txt文件，在里面加入代码后保存，重命名为index.html(记得把原来的.txt后缀覆盖）。html我用的谷歌浏览器。 index.html代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>photo-3d</ti
Shy-3D立体动态相册实现代码（源代码）
05-20
纯CSS实现鼠标经过3D立体动态展示图片特效代码 @charset "utf-8"; *{ margin:0; padding:0; } body{ max-width: 100%; min-width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-size:100% 100%; position: absolute; margin-left: auto; margin-right: auto; } li{ list-style: none; } .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{ width:100px; height:100px; position: absolute; left:50px; top:30px; -webkit-transform-style:preserve-3d; } .minbox li{ width:100px; height:100px; position: absolute; left:0; top:0; } .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); } .box:hover ol li:nth-child(1){ -webkit-transform:translateZ(300px); width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px; } .box:hover ol li:nth-child(2){ -webkit-transform:rotateX(180deg) translateZ(300px); width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px; } .box:hover ol li:nth-child(3){ -webkit-transform:rotateX(-90deg) translateZ(300px); width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px; } .box:hover ol li:nth-child(4){ -webkit-transform:rotateX(90deg) translateZ(300px); width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px; } .box:hover ol li:nth-child(5){ -webkit-transform:rotateY(-90deg) translateZ(300px); width: 400px; height: 400px; opacity: 0
3D立体相册
weixin_44739427的博客
03-30 1570
<!doctype html> 旋转相册 <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> <img sr...
HTML5七夕情人节表白代码 (动态3D相册) HTML+CSS+JS
网页设计与制作
10-18 110
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
3D动态相册HTML版
02-27
3D动态相册HTML版
520表白html实现3D动态相册，换成女朋友照片
06-10
520表白html实现3D动态相册，换成女朋友照片 请勿商业运营,违法使用和传播!仅供研究学习使用!
Jquery 动态3D相册炫酷相册大全 专心为女友定制版
01-16
Jquery 动态3D相册炫酷相册大全 专心为女友定制版 含各种动态相册技术 3d展示为主
html5 3D立体式图片相册
05-26
基于Html5+JS开发的3D立体图片相册，适用于所有浏览器，不支持IE8一下
流畅3D立体图片相册特效.zip
07-11
代码简介：流畅3D立体图片相册特效是一款立体感很强的3D图片相册效果，用起来很流畅，效果相当棒，浏览器效果兼容良好。
一款超炫HTML5 3D立体图片相册效果
09-25
HTML5 3D立体图片相册代码是一款超炫HTML5 canvas 3D立体图片相册幻灯片效果代码。
html+css+js-3D动态表白相册
05-20
html+css+js_3D动态表白相册，纯前端的web部分，资源中没有设计后台代码及其数据库部分。资源的包含了该动态相册的源码+参考文章地址，对于初学者来说，该动态相册直接用浏览器即可打开查看相应效果(如果不是预期的...
制作3D动态相册的源码相册12.rar
09-27
制作3D动态相册的源码，完全不懂编程的小白也可以轻松完成。下载，解压，放入图片文件，运行，即可得到一个像是电子版爆炸盒子一样的有趣相册。
jar包增量更新分析
junlaiyan的专栏
05-16 262
借助jdeps分析出jar包的增量文件
SpringBoot接入Knife4j接口文档
最新发布
博主是个二次元死肥宅~
05-18 679
Knife4j是Java MVC框架集成Swagger生成Api文档的增强解决方案，前身是swagger-bootstrap-ui。
java实现拼图小游戏
monkey108的博客
05-16 622
本文主要提供用java实现的拼图小游戏源代码。
命令执行漏洞（二）
XLbb的博客
05-15 906
POST方法，S2-045-bypass-2漏洞存在！,程序更改为S2-045-bypass-2漏洞测试模式, 响应码: 200。POST方法，S2-046-bypass漏洞存在！POST方法，S2-045-bypass漏洞存在！POST方法，S2-046-1漏洞存在！POST方法，S2-046-2漏洞存在！POST方法，S2-046-3漏洞存在！POST方法，S2-045-1漏洞存在！POST方法，S2-045-3漏洞存在！POST方法，S2-045-2漏洞存在！POST方法，S2-045-4漏洞存在！
3d 相册 js css
05-14
3D相册是一种以三维效果展示图片和影音资料的多媒体展示方式。通过使用js和css等Web前端技术，实现图片、音频、视频等素材按时间、类别、主题等分类方式呈现，并通过3D效果加强用户的交互体验。 js作为前端开发必备...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Null_zyd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值