1、创建文件目录 在Hbuilder在新建一个目录,创建css和js文件。 图1 2、调背景色 在style块里面给整个页面渲染成黑色调。 *{padding:0px;margin:0px;} /*这是为了消除默认dom元素的内外边距,使得我们写css的时候更精确*/ body{ background-color: #000; } |
(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)为图片设置景深(景深:对好焦的范围。它能决定是把背景模糊化来突出拍摄对象,还是拍出清晰的背景)。 (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、最终效果 主 编 | 王楠岚 责 编 | 江南沐雪
|