相册

看到别人绚丽的相册,想不想自己拥有一个,下面跟着我创建一个属于自己的相册吧。

浏览

1.利用div将相册所需要的图片装起来

2.接下来就需要通过css来对div进行调整,使得相册更加漂亮

(1).第一步将所有图片都定位到一起,即所有的图片叠在一起,效果如图所示

(2).接下来就需要让每一张图片都动起来,也就是最重要的步骤。css如何实现动画自然而然想到了animation;

不过我们的相册需要的是3D效果,因此需要将装图片的div及父级div都需要设置transform-style: preserve-3d;(需要做浏览器兼容),这样设置后就可以达到3D效果。

翻页时都是绕着书的左边旋转的,因此我们还要设置旋转的位置transform-origin: 0% 50%;(需要做浏览器兼容)。

最后就到了animation上场了,为每一张图片容器设置animation,如图所示

设置z-index是为了前面的图片不会被后面的图片遮住,从而达到预定的效果,接下来就是最后一步了,为每一张图片设置如何动,即跟animation配合使用的@keyframes(需要做浏览器兼容)。

不同的图片设置不同的旋转角度,不过后面图片的旋转角度要小于前面图片的旋转角度。

看到这里有没有心动,赶紧自己动手制作一个属于自己的网页相册吧!
 
 

声明:版权所有,盗版必究  执念博客

转载:转载请标明原文链接,谢谢合作


 
 

2 thoughts on “模拟书本翻页的相册

发表评论