模拟书本翻页的相册

执念博客
2017-05-14 / 2 评论 / 22 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年05月05日,已超过48天没有更新,若内容或图片失效,请留言反馈。

相册

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

浏览

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(需要做浏览器兼容)。

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

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

本文共 381 个字数,平均阅读时长 ≈ 1分钟
0

打赏

海报

正在生成.....

评论 (2)

取消
  1. 头像
    亚克力 Lv.1
    Windows 7 · UC Browser
    沙发

    可以学习学习

    回复
    1. 头像
      Lv.1 作者
      Windows 10 · Google Chrome
      @ 亚克力

      互相学习

      回复