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

CSS3实现翻页效果

发表于 2017-12-05 23:19 显示全部楼层 22 428

本帖最后由 欧水萍 于 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



回复 使用道具
举报
nico0304

发表于 07-09 14:45 显示全部楼层

不错

回复 支持 反对 使用道具
举报
zhen

发表于 04-06 13:20 显示全部楼层

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

发表于 01-20 10:26 来自手机 显示全部楼层

厉害了哦棒棒666666666
回复 支持 反对 使用道具
举报
hero笙萧默

发表于 01-19 13:34 来自手机 显示全部楼层

好棒的效果哇
回复 支持 反对 使用道具
举报
青果杰杰

发表于 2017-12-31 15:40 显示全部楼层

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

回复 支持 反对 使用道具
举报
晴空万里

发表于 2017-12-30 16:11 显示全部楼层

回复 支持 反对 使用道具
举报
p出我世界

发表于 2017-12-22 00:14 显示全部楼层

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

回复 支持 反对 使用道具
举报
loverol

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

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

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

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

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

发表新文章
欧水萍

小码哥名师团队

0

学分

1805

学币

1976

积分

小码哥名师团队

Rank: 5Rank: 5

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

精彩推荐

  • 关注小码哥教育