网页|实现酷炫3D相册
时间:2022-07-22
本文章向大家介绍网页|实现酷炫3D相册,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、创建文件目录
在Hbuilder在新建一个目录,创建css和js文件。
图1
2、调背景色
在style块里面给整个页面渲染成黑色调。
*{padding:0px;margin:0px;}
/*这是为了消除默认dom元素的内外边距,使得我们写css的时候更精确*/
body{
background-color: #000;
}
3、制作3D相册
(1)画一个id为wrap的div作为相框来装载所有的图片。
<div id="wrap">
<img src="img/1.jpg" alt=""/>
<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 src="img/6.jpg" alt=""/>
<img src="img/7.jpg" alt=""/>
<img src="img/8.jpg" alt=""/>
</div>
(2)为相框设置样式,用transform:rotateY(-10deg)为它设置旋转效果,用transform-style:preserve-3d来为图片设置3D效果。
#wrap{
width: 110px;
height: 180px;
margin: 350px auto;
transform-style: preserve-3d;
transform:rotateY(-10deg);
}
(3)为图片设置景深(景深:对好焦的范围。它能决定是把背景模糊化来突出拍摄对象,还是拍出清晰的背景)。
perspective:700px;
(4)给图片添加倒影效果。
img{
width: 110px;
height: 180px;
position: absolute;
box-shadow: 1px -1px 6px #666;
-webkit-box-reflect: below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));
transition: 0.5s;
}
图2
4、将图片散开,围成一圈。
(1)让所有的图片分散开来,让每一张图片均匀地根据Y轴转过360度。
var photosDom = document.getElementById('wrap');
//获取图片数组
var images = photosDom.getElementsByTagName('img');
//获取图片数量
var len = images.length;
//计算每张图片按Y轴旋转的角度
var deg = Math.floor(360 / len);
for(var i = 0; i < len;i++){
images[i].style = 'transform : rotateY(' + deg * i + 'deg)'; //deg前面不要加空格
}
效果如图:
图3
(2)编写js代码,让其中一张图片沿着它自己的Z轴向外移动。
for(var i = 0; i < len;i++){
images[i].style = 'transform : rotateY(' + deg * i + 'deg)'; //deg前面不要加空格
if(i == 1){
images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(300px)';
}
}
效果如图:
(3)用js代码,在每一张图片根据Y轴旋转的时候,就让它沿着Z轴“飘”出来。
for(var i = 0; i < len;i++){
images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(380px)'; //deg前面不要加空格
}
(4)如果相册整体太水平了,可以用transform:rotateX(-10deg)让整个相册根据X轴向下移动10px,达到俯视的效果。
transform:rotateX(90deg);
5、绘制透明底盘
它是一个放在wrap里面的div,通过定位布局和css3特性就可以实现。
<div id="wrap">
<img src="img/1.jpg" alt=""/>
<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 src="img/6.jpg" alt=""/>
<img src="img/7.jpg" alt=""/>
<img src="img/8.jpg" alt=""/>
<div></div>
</div>
#wrap div{
width:1200px;
height:1200px;
border-radius:50%;
position:absolute;
top:102%;
left:50%;
margin-left:-600px;
margin-top:-600px;
transform:rotateX(90deg);
background:-webkit-radial-gradient(center center,600px 600px,rgba(158,158,222,0.5),rgba(0,0,0,0));
}
6、最终效果
- 大过年的,一起来用Seq2Seq来作对联吧!
- python3 下调用zabbix api 获取多个机房的IP
- TensorFlow从0到1 - 14 - 交叉熵损失函数——防止学习缓慢
- 用优雅的配色来缔造图表专业主义~
- python文件名与包名冲突
- python3 Zabbix监控-api的使用-python
- 安装python虚拟环境
- 各种排序算法的分析及java&python实现
- python3elk相关---根据Elasticsearch(es)日志处理,生成excel并定时邮箱发送附件
- python数据科学-数据预处理
- python3 邮箱相关邮箱的服务
- 谈一谈Python中str()和repr()的区别
- TensorFlow从0到1 - 15 - 重新思考神经网络初始化
- python2.7搬运--->TensorFlow - 深度学习破解验证码
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP数字金额转换成中文大写显示
- 详解Python多线程下的list
- Python 字符串池化的前提
- PHP抽象类基本用法示例
- keras分类模型中的输入数据与标签的维度实例
- keras的三种模型实现与区别说明
- PHP智能识别收货地址信息实例
- Keras 在fit_generator训练方式中加入图像random_crop操作
- PHP面向对象程序设计继承用法简单示例
- php根据命令行参数生成配置文件详解
- PHP使用SOAP调用API操作示例
- 使用Zookeeper分布式部署PHP应用程序
- pytorch判断是否cuda 判断变量类型方式
- Keras搭建自编码器操作
- python程序如何进行保存