网页

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号：”算法与编程之美”，欢迎关注，及时了解更多此系列文章。

欢迎加入团队圈子！与作者面对面！直接点击！

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 sr六级翻译多少分c=”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:prerve-3d来为图片设置3D效果。

#wrap{

width: 110px;

height: 180px;

margin: 350px auto;

2016年9月8日 transform-style: prerve-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、最终效果

END

主 编 | 王楠岚

责 编 | 江南沐雪

where2go 团队

微信号：算法与编程之美

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！

本文地址：https://blog.csdn.net/gschen_cn/article/details/107373813