请选择 进入手机版 | 继续访问电脑版

CSS3实现翻页效果

发表于 12-05 23:19 显示全部楼层 15 141

本帖最后由 欧水萍 于 2017-12-6 08:56 编辑

CSS3实现翻页效果

        前段时间有同学问,CSS3能不能实现翻页效果,答案是肯定的。这次分享一个CSS3实现书本翻页效果,下面是效果预览:

翻页.gif

        实现原理:每一页可以由一个单独的盒子管理,盒子里面存放图片或者其他内容,它们是绝对定位层叠在一起的,并且存在着一定的层级关系(z-index),实现翻页主要通过动画属性(animation)控制每一页沿着y轴逆时针旋转180度(transform:rotateY(-180deg)),切记旋转中心点要设置水平方向靠左,垂直方向居中(transform-origin:left center)再通过控制动画延时(animation-delay)改变出场顺序制造逐页播放效果,动画播放完成后会默认回到初始状态,所以还需要规定动画时间以外的状态属性(animation-fill-mode),属性值设置为forwards可以让动画播放完成后停在最后一帧。翻页效果存在立体感和透视感,所以需要给父元素加上透视属性(perspective:1000px)和设置3d转换(transform-style:preserve-3d),子元素则保留3d位置并且存在近大远小的视觉效果。


相关代码如下:


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>翻页效果</title>

<style>

*{padding: 0; margin: 0; list-style: none; border:0;}

.book{width: 200px; height:355px; border: 1px dashed #ccc; margin:160px auto; position:relative; transform-style:preserve-3d; perspective:1000px; background:#ccc;}

.book div{width: 100%; height: 100%; position:absolute; left: 0; top: 0; animation:fan 2s linear forwards; transform-origin:left center; height:355px; overflow: hidden;}

.book .page1{background:red; z-index:6}

.book .page2{background:orange; animation-delay:2s; z-index:5}

.book .page3{background:yellow; animation-delay:4s; z-index:4}

.book .page4{background:lime; animation-delay:6s; z-index:3}

.book .page5{background:blue; animation-delay:8s; z-index:2}

.book .page6{background:purple; animation-delay:10s; z-index:1}

@keyframes fan{

0%{ transform:rotateY(0deg);}

100%{ transform:rotateY(-180deg); z-index:7;}

}

</style>

</head>

<body>

<div class="book">

<div class="page1"><img src="images/01.jpg" width="100%" alt=""/></div>

<div class="page2"><img src="images/02.jpg" width="100%" alt=""/></div>

<div class="page3"><img src="images/03.jpg" width="100%" alt=""/></div>

<div class="page4"><img src="images/04.jpg" width="100%" alt=""/></div>

<div class="page5"><img src="images/05.jpg" width="100%" alt=""/></div>

<div class="page6"><img src="images/06.jpg" width="100%" alt=""/></div>

</div>

</body>

</html>


需要源文件的同学可以自行下载:

链接:https://pan.baidu.com/s/1c2iToq  

游客,如果您要查看本帖隐藏内容请回复

提取码回复本帖子可见

了解更多内容

请关注小码哥网页UI学院

http://www.520it.com/special/ui



回复 使用道具
举报
loverol

发表于 12-15 10:21 显示全部楼层

观后纵想法再多,也不如一句回复实在!

回复 支持 反对 使用道具
举报
苍了夏靡

发表于 12-14 18:47 显示全部楼层

回复 支持 反对 使用道具
举报
认真的屎迪仔

发表于 12-12 19:13 显示全部楼层

我思故我在,我在我就回

回复 支持 反对 使用道具
举报
小草莓

发表于 12-09 19:27 来自手机 显示全部楼层

yeah 棒棒哒 想试试也 哈哈哈哈哈哈哈
回复 支持 反对 使用道具
举报
paschen

发表于 12-08 09:29 显示全部楼层

以诚感人者,人亦诚而应。一点回复,敬请笑纳!

回复 支持 反对 使用道具
举报
默默地走开

发表于 12-06 14:47 来自手机 显示全部楼层

厉害了我的天啊
回复 支持 反对 使用道具
举报
凌大胖纸

发表于 12-06 12:45 显示全部楼层

  ╭══╮ ┌══════┐

  ╭╯让路║═‖ 酱油专用车 ‖

  ╰⊙═⊙╯ └══⊙═⊙═~. 作为一个资深的酱油党,我们需要做的不仅仅是路过,在路过的同时 还要关心楼主,鼓励楼主,在这个冷漠的时代,给予楼主温暖。酱油党莅临的地方,不仅仅是挽尊,不仅仅是消灭零回复,酱油

回复 支持 反对 使用道具
举报
蓝明周老师

发表于 12-06 09:36 显示全部楼层

这个效果很实用

回复 支持 反对 使用道具
举报
烟雨过客

发表于 12-06 08:56 显示全部楼层

回复 支持 反对 使用道具
举报
12下一页

发表新文章
欧水萍

小码哥名师团队

0

学分

1651

学币

1813

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1813
Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育