教你如何一秒钟学会翻书动画相册

 多余的话就不说了，让我们直奔主题。

第一步：
先准备好你要做的相册的照片，然后把图片都放在一个文件夹里，最好加上顺序，防止错乱。
然后我们在这个文件夹里创建一个html文件，然后把布局先写好，就像下面这样，你准备做几页的相册，这里就写几个li标签。

第二步：
我们去除网页的基础样式，同时给我们的相册设置好大小。看你想做一个多大的相册，就可以设置多大，可以根据自己的照片大小来设置。

第三步：
刚才我们简单设置好了宽高，但是这个宽高是设置给ul标签的，我们的照片是放在li标签里，所以我们要给li标签设置100%宽高，让他占满父容器的宽和高。

然后我们要让所有的li在一个地方，大家可以想一下书的页面，本来几乎就在一个地方，慢慢翻开，所以我们要给li加一个绝对定位，都定位在一个地方，然后让每一个li的转动角度稍稍不同，这样我们的书就有了厚度。这里用：nth-of-type（）选择器做比较方便。

同时，我们这是要做一个翻书的动画，同时要能展示出来照片，所以我们的li肯定是一个斜的面，那li就必须要绕着X轴旋转一个角度，大家可以想一下就是你站在原地向后倒。
但是此时我们的网页是2D的，所以这时候就需要给父容器加一个3D场景以及景深。这样才能看出来3D的效果。
这里我们顺便附上用的几个代码：
transform-style：preserve-3d ；给块元素设置一个3D空间。
perspective(景深) : 离屏幕多远的距离去观察元素，值越大幅度越小。这里我们设置了500px。
transform：rotateX（？deg）；块元素绕着X轴转动？度，deg是角度的单位。朝第一象限转动为正值。
position: absolute; 绝对定位，后面加上 left：； top：； bottom： ; right: ; 取值。

第四步：
现在我们要做的事就很简单了，就是让你鼠标移上去的时候让这本书一页一页翻动，所以我们要给li加一个**：hover**，然后让他绕着Y轴转动180度，但是书是一页一页翻的，所以我们要给每一个li分别加时间。这里就又要用我们的**：nth-of-type（）选择器。

同时呢，书也是都绕着左边一个边或者右边一个边转的，所以这里我们要设置旋转基点**：
transform-origin: left;
设置好之后我们给每一个li放入图片，图片大小我们可以在PS里设置到我们的li一样大小。
这样简单的效果就出来了。
图片我这里就不插入了，很简单。如果还想修饰一下相册，可以给相册加上阴影，在来一个倒影，倒影做一个渐变，出来的效果就非常好了，这里给大家看一下，我加个背景色和渐变的翻书代码以及效果。

如何，是不是还不错呢，快给你们女朋友去制作一个吧，下期教大家更加精彩的。

教你如何一秒钟学会翻书动画相册相关推荐

使用OpenGL实现翻书动画
2019独角兽企业重金招聘Python工程师标准>>> 上一篇文章介绍了如何通过纹理渲染绘制地球仪,当然OpenGL的三维图形处理能力是很强大的,只要善于利用OpenGL,就能很方便 ...
Android开发笔记（一百五十七）使用OpenGL实现翻书动画
上一篇文章介绍了如何通过纹理渲染绘制地球仪,当然OpenGL的三维图形处理能力是很强大的,只要善于利用OpenGL,就能很方便地虚拟各种现实生活中的动画效果.本文再来谈谈使用OpenGL实现浏览电子书 ...
uni-app h5、app模式下集成turn.js 翻书动画
uni-app 集成turnjs 翻书动画 h5 页面引入JQuery.turn.js 工具类文件,注意引入的顺序 import '@/utils/jquery.min.1.7.js'; impor ...
Android App开发手机阅读中实现平滑翻书效果和卷曲翻书动画实战（附源码简单易懂可直接使用）
需要图片集和源码请点赞关注收藏后评论区留言~~~ 一.平滑翻书效果与纸质书籍类似,手机上的电子书也有很多页,逐页浏览可采用翻页视图,然而翻页视图犹如一幅从左到右的绵长画卷,与现实生活中上下层叠的书籍 ...
HTML5+CSS3小实例：翻书动画
实例:翻书动画技术栈:HTML+CSS 效果: 源码: <!DOCTYPE html> <html><head><meta http-equiv=" ...
如何用transition实现翻书动画效果
下面给大家介绍一个小案例,可以实现翻书的效果,以打开音乐盒为例. 这个案例主要是运用了一个transition的坐标轴,在动画效果中,要求以第二张图片的边缘进行翻页. 代码如下: 先放入两张图片在bo ...
android 翻书动画效果怎么做,android ViewPager实现滑动翻页效果实例代码
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import andr ...
ulli*3 实现翻书动画效果
按惯例,上GIF: 重现:https://codepen.io/anon/pen/JJBxOm 这是我今天参加面试时候,面试官让我做的一道题,面试官坐我旁边看我现场做,然而我比较菜,回来后才做出来-- ...
Css3翻书动画特效
一.预览特效二.全部代码 <!DOCTYPE html> <html><head><meta charset="utf-8">&l ...

教你如何一秒钟学会翻书动画相册

教你如何一秒钟学会翻书动画相册相关推荐

最新文章

热门文章