抖音上很火的3D立体动态相册实现代码!
前言:
私信我,已经录制好操作视频,如果看文章不会操作的话!
圣诞节快到了,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了,来制作属于我们程序员的浪漫吧!先上效果图,来引起下你们的兴趣。
正文:
一、新建一个index.html的文件,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS实现鼠标经过3D立体动态展示图片特效代码</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<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>
</body>
</html>
二、css样式的代码
@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.8;left: -100px;top: -100px;
}
.box:hover ol li:nth-child(6){-webkit-transform:rotateY(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
@keyframes move{0%{-webkit-transform: rotateX(13deg) rotateY(0deg);}100%{-webkit-transform:rotateX(13deg) rotateY(360deg);}
}
三、文件的目录结构,把css文件放到css文件夹里,图片放到img文件夹里。
四、图片尺寸不会修改的,可以选择使用美图秀秀网页版很简单
五、容易出现的问题 ,图片展示不全或展示的方向不对
1.图片尺寸需要修改 (解决展示不全的情况)
上图是我的图片文件夹里放的图片 ,首先01-06编号命名的图片尺寸是100x100px的大小的,1-6编号是400x400px,如果效果想展示最佳,100x100px的图片是以头部特写的照片最好,因为01-06是立体照片内部小正方体的照片,1-6编号是外部正方体的照片。
2.图片的方向需要修改(解决头朝下的问题)
修改的方向如上图展示所示,比如第三张头就应该朝下,否则形成的效果图像会出现头是倒着的情况。
六、放一下动态效果图
总结:
生活虽然总有辛酸,但是我们不应该减少去创造生活的乐趣,不断寻找属于自己的那份快乐,才应该是我们生活的态度。如果是非技术的朋友看到这篇博客,发现不会弄,可以直接留言要代码包,自己替换下图片就可以啦。
我是阿达,一名喜欢分享知识的程序员,时不时的也会荒腔走板的聊一聊电影、电视剧、音乐、漫画,这里已经有723位小伙伴在等你们啦,感兴趣的就赶紧来点击关注我把,哪里有不明白或有不同观点的地方欢迎留言!
3D代码包的下载地址:百度网盘-链接不存在
提取码请关注公众号,回复3D相册代码获取提取码:
抖音上很火的3D立体动态相册实现代码!相关推荐
- java3d翻转纪念相册_抖音上很火的3D立体动态相册实现代码!
前言: 圣诞节快到了,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧!先上效果图,来引起下你们的兴趣. ...
- 抖音上很火的3D立体动态相册
带背景音乐网站效果: http://www.fengzhao.icu/photos/html/%E6%8A%96%E9%9F%B3%E4%B8%8A%E5%BE%88%E7%81%AB%E7%9A%8 ...
- 抖音3d相册html代码,抖音上很火的3D立体动态相册.html
纯CSS实现鼠标经过3D立体动态展示图片特效代码 *{ margin:0; padding:0; } body{ max-width: 100%; min-width: 100%; height: 1 ...
- 怎么用java做一个立体相册_抖音上很火的3D立体动态相册实现教程!(不懂编程也能学会)...
现在开始说说制作过程: 一.创建文件夹 1.在桌面建一个文件夹,命名随意 2.在文件夹里创建一个文件名为index.html的文件 3.在文件夹里创建两个文件名分别为img.css的文件夹 4.在cs ...
- 编程制作动态壁纸的思路_抖音上很火的3D立体动态相册实现教程!(不懂编程也能学会)...
现在开始说说制作过程: 一.创建文件夹 1.在桌面建一个文件夹,命名随意 2.在文件夹里创建一个文件名为index.html的文件 3.在文件夹里创建两个文件名分别为img.css的文件夹 4.在cs ...
- 抖音上很火的3D立体动态相册代码制作教程
直接来正文 直接来干货 先创建一个html文件 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 抖音上很火的H53D立体动态相册效果
网站效果:http://www.fengzhao.icu/pic/index.html 动态效果图 源码Demo: 一.新建一个index.html的文件,代码如下 <!DOCTYPE html ...
- 用html3d静态相册带音乐,抖音上很火的H53D立体动态相册效果
网站效果:http://www.fengzhao.icu/pic/index.html 动态效果图 源码Demo:css 1.新建一个index.html的文件,代码以下 纯CSS实现鼠标通过3D立体 ...
- 花了30分钟,给女朋友们写了个最近抖音很火的3D立体动态相册
鉴于蛮多人私信我问我要源码的(虽然源码我就贴在下面,无奈摊手.jpg), 我想可能是他们想知道这个东西是怎么写的,所以我还是把思路写出来吧 我们先看效果 效果 代码 <!doctype html ...
- 超简单:很火的3D立体动态相册,送给心爱的那个人
1.首先,我们一共需要三个文件,目录关系如下所示.先建index.html文件吧,电脑上先创建一个.txt文件,在里面加入代码后保存,重命名为index.html(记得把原来的.txt后缀覆盖).ht ...
最新文章
- 《c++ templates》学习笔记(9)——第十二章 特化与重载
- RHCS套件实现高可用负载均衡集群(一)
- 打入硅谷的局外人|Decode the Week
- 服务器向客户端不响应为null的属性(为了便于查询JSON数据)spring.jackson.default-property-inclusion=NON_NULL
- 在Amilal听杭盖乐队演唱
- 重口味动漫_每种口味的图标样式
- java 7.函数-递归_带有谓词的Java中的函数样式-第2部分
- 线性系统的基本理论与运算
- JuliaPro安装与使用
- 首次项目经验总结(一)
- 全新版在线迅捷PDF转换器
- win10快速关机_如何实现Windows定时关机(win7/win10)
- Android Persistent常驻内存分析
- linux设置display参数,Linux DISPLAY 变量设置
- Mycat的简单使用(三)【分库分表】
- oracle minus 条件,Oracle minus用法详解及应用实例
- 传智健康day04 预约管理-套餐管理
- word文件丢失怎么办?恢复Word文档的3个方案
- 试题 算法提高 Monday-Saturday质因子
- ABAP ALV中自定义搜索帮助