欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

网页|实现酷炫3D相册

程序员文章站 2022-06-19 16:15:08
欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。欢迎加入团队圈子!与作者面对面!直接点击!1、创建文件目......

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

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

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

1、创建文件目录

在Hbuilder在新建一个目录,创建css和js文件。

网页|实现酷炫3D相册

图1

2、调背景色

style块里面给整个页面渲染成黑色调。

*{padding:0px;margin:0px;}

/*这是为了消除默认dom元素的内外边距,使得我们写css的时候更精确*/

body{

         background-color:  #000;

}

3、制作3D相册

(1)画一个idwrapdiv作为相框来装载所有的图片。

<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;

}

网页|实现酷炫3D相册

图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前面不要加空格

}

效果如图:

网页|实现酷炫3D相册

图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)';

         }

}

效果如图:

网页|实现酷炫3D相册

(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、最终效果

网页|实现酷炫3D相册

END

主  编   |   王楠岚

责  编   |   江南沐雪

 where2go 团队


   

微信号:算法与编程之美          

网页|实现酷炫3D相册

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

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

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

相关标签: css