java 3d相册源代码_抖音上超火的3D立体动态相册实现代码! 给女朋友一个意外的惊喜...
前言:
生活处处惊喜,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇文章就分享下前端代码如何实现3D立体动态相册。赶紧学会了,来制作属于我们程序员的浪漫吧!先上效果图,来引起下你们的兴趣。
正文:
一、新建一个index.html的文件,代码如下
Bubbles (CodePen Circles Challenge)
二、css样式的代码
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
canvas {
position: fixed;
width: 100%;
height: 100%;
}
二、css样式的代码
@charset "utf-8";
*{
margin:0;
padding:0;
}
body{
/*background: url(../img/preview.png) ;*/
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相册代码 即可领取代码
java 3d相册源代码_抖音上超火的3D立体动态相册实现代码! 给女朋友一个意外的惊喜...相关推荐
- 动态壁纸安卓_抖音上超火的时间轮盘动态壁纸,安卓苹果都可以设置!个性好看...
今天给大家分享一个最近很火的时间轮盘带姓氏的壁纸 效果呢就像我们现在看到的这样 看起来呢有点像古墓的感觉 同时我们常见的带姓氏的壁纸我也已经给大家准备好了 制作呢也非常的简单 我们只需要在微信的搜索页 ...
- 抖音 触摸精灵_抖音上超火的iPhone图标滑动技巧!还不知道怎么设置就out啦
原标题:抖音上超火的iPhone图标滑动技巧!还不知道怎么设置就out啦 我们都知道现在手机里有很多好玩的功能,一些手机厂商会明着告诉你,作为手机的一大卖点.可有一些却偏偏像彩蛋一样,藏得很深,你不仔 ...
- 抖音上超火的3D立体动态相册表白特效(29)
制作成下面这种效果: 鼠标经过时会展开十分好看!换成你和情人的图片,可以放十几张不同的图片也可以只放一种图片! 文件放置部分: css代码部分: html{background:url(../img/ ...
- 抖音轮播图html代码,抖音上超火的“图片轮播”、“卡点”视频都是怎么做的?...
原标题:抖音上超火的"图片轮播"."卡点"视频都是怎么做的? 话不多说,直接进入正题. 首先,图片轮播类的视频该怎么做? 抖音视频剪辑 江苏麒麟互娱 步骤一:选 ...
- 抖音很火的卡通表白动态页面
文章目录 抖音很火的卡通表白动态页面 表白网站简介 视频演示 资源下载 抖音很火的卡通表白动态页面 表白网站简介 很多小伙伴想在5.20 给女朋友一个惊喜,今天我给大家分享一个抖音很火对策卡通表白动态 ...
- python 抽奖 配音乐_抖音上超好听的神曲音乐,Python教你一次性下载
不知道什么时候开始,中国出现了南抖音.北快手的互文格局(东市买骏马,西市买鞍鞯-).刚才提到了,之前比较喜欢刷抖音,对于我这种佛系程序猿,看网上这些整容妹子基本一个样.喜欢抖音主要是两个初衷,学做菜听 ...
- Java+jxbrowser+jna+js实现抖音很火的时钟桌面WallPaperEngine
很早以前就在抖音上看到电脑时钟桌面,当时都惊呆了,不知道是如何实现的,但抖音上也没有说实现步骤,也就没有放在心上.前段时间刚刚换了个新的显示器,想着更新一下桌面背景,网上找了一翻,没有特别喜欢的背景图 ...
- oracle 去掉最右边_抖音最火的十大神曲 你最喜欢的是这首嘛
抖音作为最火的音乐短视频社区平台,现在已经成为了年轻人必备的一款娱乐软件,每天刷一下抖音,心情也会好很多.抖音自从上线后风靡全国,其也带火了一批歌曲,有些太魔性让人百听不厌,简直是洗脑神曲.下面,我们 ...
- 有趣的歌单昵称_抖音最火的10大神曲 你的歌单里面有几首
抖音可以说是现在最流行的视频软件了,上面会分享各种有趣的事情,不少好听的音乐都是从这里被发掘的,那么在又有哪些动人心弦的歌曲呢?今天小编就来为大家列出抖音最火的10大神曲. 抖音最火的10大神曲: 1 ...
- 钉钉windows端多开软件_抖音很火的备忘录软件是什么?比较火的备忘录便签软件...
抖音是很多年轻人都比较喜欢使用的一款短视频APP,我们不但能够用它来娱乐打发时间,还可以从抖音的视频中接收咨询和学习.近期我在抖音上看到了不少人都在使用备忘录便签软件,抖音很火的备忘录软件是什么?比较 ...
最新文章
- Java计算两个字符串日期之间的天数差
- python 的回调函数
- 解决idea中执行maven命令失败的问题
- 原理分析之:从JDBC到Mybatis
- Linux下mp3文件的乱码问题
- vue组件化通信之父向子传值
- Flex4 启动失败: 正在等待 Adobe Flash Player 连接调试器
- phpMyAdmin安装配置方法全过程,及问题解决
- JavaCV人脸识别三部曲之二:训练
- android google翻译,在android中施用google翻译
- 倾斜摄影在农房一体不动产测量中的技术流程(Smart3D+EPS)
- Shell 获取服务器IP地址
- uniapp长按识别二维码、小程序码
- 一般网站建设大概需要多少钱?
- scala case 常用简写
- 知乎上关于电子商务话题的精彩问答
- 苹果公司的电脑发展史——硬件篇
- 支付宝支付开发——当面付条码支付和扫码支付
- 分布式系统性能测试框架
- [乐意黎]Windows cannot access \\127.0.0.1 等局域网和网上邻居无法访问的解决方法