整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

使用CSS3的新特性完成一个翻书的动画效果，来学习一

使用CSS3的新特性完成一个翻书的动画效果，来学习一下吧

言

在CSS3中新增了很多的新特性，其中使用频率比较高的应该是动画效果了，它可以帮助我们实现以前使用Javascript才能实现的效果，极大的提高网页的性能。今天这篇文章我们就来一起看一个使用CSS3新特性完成的翻书效果吧。

本文的源码已经放在了Github上，感兴趣的可以clone到本地试试，地址如下。

https://github.com/zhouxiongking/article-pages/blob/master/articles/rollPage/rollPage.html

CSS3

实现效果

首先我们来看看实际的运行效果，动态图如下所示。

效果图

页面分析

在看到上述的效果图后，我们来进行分析，这个过程是如何实现的。

这个页面我们通过一个ul包含三个li来实现，每个li都给一个固定的宽度和高度。

  • 第一个li在页面上静止不动。

  • 第二个li添加动画效果，使其直接绕Y轴翻转360度。

  • 第三个li添加动画效果，但是翻转周期是在25%的时候开始，因此会有一种翻书的速度差异感。

上面的步骤分析完后就剩下最重要的一个过程，那就是给外层的ul元素添加perspective属性，这个属性是决定这个动画能不能实现的主要的因素。

perspective

perspective是CSS3中新增的属性，表示的是设置某个元素被查看的视角，用于实现3D效果。

需要注意的是当某个元素设置了perspective属性时，其子元素会获得透视效果，而不是这个元素本身。

我们来看一个简单的例子，有一个section父元素和一个div子元素，让div元素旋转45度，html元素如下。

html元素

其对应的CSS属性如下。

CSS属性

在section元素上，如果不使用perspective的情况下，得到效果如下图所示。

效果图1

如果给section元素加上perspective属性，并设定600px时，得到的效果图如下。

效果图

通过以上两幅图的对比我们发现，两幅图在Y轴的视角上发生了变化。

接下来，我们来具体看看这个翻书效果的代码实现。

翻书效果HTML代码

通过之前的分析，我们知道这个效果是通过ul与li来实现的，html部分代码如下。

HTML代码

翻书效果CSS代码

首先看看ul与li的基本css属性，记住这里需要给ul元素添加perspective属性。

基本CSS属性

然后是给第二个li添加动画。

第二个li的css属性

最后是给第三个li添加动画。

第三个li的css属性

注意到上面的代码中有个25%和100%的设置，这个和第二个li不同，所以会有一种翻转书页快慢的差异感。

如果按照上述代码来做，即可实现文章开始的翻书动画效果。

结束语

今天这篇文章主要是通过CSS3新增的属性实现了一个翻书动画效果，大家学会了吗？

果图

今天给大家带来的是 CSS3图片翻页动画（10种动画）！

丰富一下列位的特效储备库！

文件版源码获取，请看评论区！

废话不多说，上源码！

CSS源码：

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

@font-face {

font-family: 'codropsicons';

src:url('../fonts/codropsicons/codropsicons.eot');

src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),

url('../fonts/codropsicons/codropsicons.woff') format('woff'),

url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),

url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');

font-weight: normal;

font-style: normal;

}

body {

background: #81c439;

color: #fff;

font-family: 'Lato', Arial, sans-serif;

}

.clearfix:before,

.clearfix:after {

content: '';

display: table;

}

.clearfix:after {

clear: both;

}

a {

color: rgba(255,255,255,0.7);

text-decoration: none;

outline: none;

}

a:hover,

a:focus {

color: #fff

}

.container > header {

margin: 0 auto;

padding: 2em 15% 0;

text-align: center;

}

.container > header h1 {

font-size: 1.8em;

line-height: 1.3;

margin: 0;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 2px;

word-spacing: 5px;

}

.container > header span {

display: block;

font-size: 60%;

opacity: 0.7;

padding: 0 0 0.6em 0.1em;

}

/* To Navigation Style */

.codrops-top {

background: rgba(255, 255, 255, 0.1);

text-transform: uppercase;

width: 100%;

font-size: 0.69em;

line-height: 2.2;

font-weight: 700;

}

.codrops-top a {

text-decoration: none;

padding: 0 1em;

letter-spacing: 0.1em;

display: inline-block;

}

.codrops-top a:hover {

background: rgba(255,255,255,0.95);

color: #81c439;

}

.codrops-top span.right {

float: right;

}

.codrops-top span.right a {

float: left;

display: block;

}

.codrops-icon:before {

font-family: 'codropsicons';

margin: 0 4px;

speak: none;

font-style: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

line-height: 1;

-webkit-font-smoothing: antialiased;

}

.codrops-icon-drop:before {

content: "\e001";

}

.codrops-icon-prev:before {

content: "\e004";

}

/* Demo Buttons Style */

.codrops-demos {

padding-top: 1em;

max-width: 700px;

margin: 0 auto;

}

.codrops-demos a {

text-decoration: none;

outline: none;

display: inline-block;

font-weight: 700;

text-transform: uppercase;

font-size: 0.8em;

margin: 0.5em 0.4em;

letter-spacing: 1px;

background: rgba(0,0,0,0.1);

padding: 0.4em 0.9em;

-webkit-transition: all 0.2s;

transition: all 0.2s;

}

.codrops-demos a.current-demo,

.codrops-demos a:hover,

.codrops-demos a:focus {

opacity: 1;

background: rgba(0,0,0,0.25);

}

section {

text-align: center;

font-size: 150%;

padding: 1em 1% 2em;

}

@media screen and (max-width: 25em) {

.codrops-icon span {

display: none;

}

}

index源码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Animations for Thumbnail Grids | Demo 1</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css" />

<link rel="stylesheet" type="text/css" href="css/demo.css" />

<!--必要样式-->

<link rel="stylesheet" type="text/css" href="css/component.css" />

<script src="js/modernizr.custom.js"></script>

</head>

<body>

<div>

<header>

<h1>网格缩略图动画</h1>

<nav>

<a href="index.html">Fall</a>

<a href="index2.html">Slide</a>

<a href="index3.html">Rotate Fall</a>

<a href="index4.html">Rotate Scale</a>

<a href="index5.html">Stack</a>

<a href="index6.html">3d Flip</a>

<a href="index7.html">Bring back</a>

<a href="index8.html">Superscale</a>

<a href="index9.html">Center Flip</a>

<a href="index10.html">Front Row</a>

</nav>

</header>

<section>

<ul class="tt-grid tt-effect-fall tt-effect-delay">

<li><a href="#"><img src="img/1.jpg" alt="img01"/></a></li>

<li><a href="#"><img src="img/2.jpg" alt="img02"/></a></li>

<li><a href="#"><img src="img/3.jpg" alt="img03"/></a></li>

<li><a href="#"><img src="img/4.jpg" alt="img04"/></a></li>

<li><a href="#"><img src="img/5.jpg" alt="img05"/></a></li>

<li><a href="#"><img src="img/6.jpg" alt="img06"/></a></li>

</ul>

<nav>

<a></a><a></a><a></a><a></a>

</nav>

</section>

</div><!-- /container -->

<script src="js/classie.js"></script>

<script src="js/thumbnailGridEffects.js"></script>

</body>

</html>

urnjs4下载

官网： http://www.turnjs.com/
首页download下来里面包括所需要的js，一些例子和api

页面功能说明

在html中用一个<div/>作为容器管理所有的页面，往div内添加页面有三种方式：

直接在flipbook里面添加元素

<div id="flipbook">
   <div>第1页</div>
   <div>第2页</div>
   <div>第3页</div>
</div>

用api里提供的方法添加

<div id="flipbook">
   <!-- 在这里添加页 -->
</div>

第一种和第二种方式结合

<div id="flipbook">
   <div>第1页</div>
   <!-- 在这里添加页 -->
   <div>最后1页</div>
</div>

样式功能说明

hard属性

<!--把纸张变成硬纸板，翻页的时候效果如翻纸板-->
<div id="flipbook">
    <div class="hard">第1页</div>
    <div>第2页</div>
    <div>第3页</div>
</div>

own-size属性-纸张大小

<!--自定义书内纸张大小，style-->
<div id="flipbook">
   <div class="own-size" style="width: 200px; height: 200px;">第1页</div>
   <div class="own-size" style="width: 200px; height: 200px;">第2页</div>
   <div>第3页</div>
</div>

p[0-9]+ 样式增加

//设置页面样式 
<div id="flipbook">
    <div>第1页</div>  //在css中写.p1{}, 第一页会自己加上.p1
    <div>第2页</div>
    <div>第3页</div>
</div>

构造方法

$('#flipbook').turn([options]);

配置项说明

$('.flipbook').turn({
    width: 922,         //宽度
    height: 600,        //高度
    acceleration: true, //硬件加速, 默认true, 如果是触摸设备设置为true
    autoCenter: false,  //自动居中, 默认false
    display: 'double',  //单页显示/双页显示  single/double
    duration: 1000,     //翻页速度(毫秒), 默认600ms
    gradients: true,    //翻页时的阴影渐变, 默认true
    inclination: 0,
    page: 1,            //设置当前显示第几页
    //pages: 4,         //总页数
    when: {}            //监听事件
});

使用方法说明

语法

$('.flipbook').turn('方法名'[, 参数],);   
//不需要turn()返回值的时候，可以连这写
$('.flipbook').turn('方法名'[, 参数],).turn('方法');

addPage增加页面

//增加一页
//两个参数 1,jquery对象（页面） 2,页号（非必填,默认是往最后一页后面加一页）
$('.flipbook').turn('addPage', $('<div/>'), 3);

dispaly单双页设置

//一个参数 single/double 单页/双页 显示
$('.flipbook').turn('display', 'double');

//获取display属性值
$('.flipbook').turn('display');  //返回single or double

removePage删除页面

//移除指定页
//一个参数 页号
$('.flipbook').turn('removePage' , 2); //移除第二页

hasPage页面是否存在

//指定页是否存在
//一个参数 页号
$('.flipbook').turn('hasPage' , 1); //如果该页存在，返回true

next翻到下一页

//翻到下一页
$('.flipbook').turn('next');

previous翻到上一页

//翻到上一页
$('.flipbook').turn('previous');

is是否存在

//是否存在turn()实例
$('.flipbook').turn('is'); //存在返回true

page跳转指定页

//翻到指定页
$('.flipbook').turn('page' , 2); //翻到第二页

//返回当前显示第几页
$('.flipbook').turn('page');

pages设置总页数

//设置总页数
$('.flipbook').turn('pages' , 2);

//返回总页数
$('.flipbook').turn('pages');

peel那个角度翻页

//展示从哪个角翻页
//一个参数   tl-左上角 bl-左下角 tr-右上角 br-右下角 l-左 r-右
$('.flipbook').turn('peel' , 'br');

//不显示
$('.flipbook').turn('peel' , false);

// r和l在设置class=hard时才有效果

size设置大小

//设置大小
//两个参数 1,width 2,height
$('.flipbook').turn('size', 922 ,600);

//返回纸的大小{width: xx, height:xx}
$('.flipbook').turn('size');

stop停止翻页效果

//停止动画效果
$('.flipbook').turn('page', 3).turn('stop'); //没有翻页动画

zoom缩放

//缩放
//两个参数 1,缩放倍数 2, 缩放动画持续事件（感觉没起作用啊）
$('.flipbook').turn('zoom', 0.6, 500);

//返回缩放倍数，默认1
$('.flipbook').turn('zoom');

事件使用说明

两种方式添加事件

1. turn()构造方法里面的 when: {}
2. bind()

start动作开始触发

//页面上的任何一个动作开始触发
when: {
    start: function (event, page, pageObj) {
        console.log('start');
    }

$('.flipbook').bind('start', function (event, page, pageObj) {
    console.log('start');
});

end动作结束触发

//页面上的任何一个动作结束触发
when: {
    end: function (event, page, pageObj) {
        console.log('end');
    }

$('.flipbook').bind('end', function (event, page, pageObj) {
    console.log('end');
});

first第一页触发

//当在第一页时触发
when: {
    first: function (event) {
        console.log('first page');
    }

$('.flipbook').bind('first', function (event) {
    console.log('first page');
});

last最后一页触发

//当在最后一页时触发
when: {
    last: function (event) {
        console.log('last page');
    }

$('.flipbook').bind('last', function (event) {
    console.log('last page');
});

turning翻页前触发

//翻页前触发
//event
//page $('.flipbook').turn('page') 
//view $('.flipbook').turn('view'); 
when: {
    turning: function (event, page, view) {
        console.log('turning', page, view); //page 和 view 显示的是当前展示的页号
    }

$('.flipbook').bind('turning', function (event, page, view) {
    console.log('turning', page, view);
});

turned翻页后触发

//翻页后触发
//event
//page $('.flipbook').turn('page')
//view $('.flipbook').turn('view'); 
when: {
    turned: function (event, page, view) {
        console.log('turned');
    }

$('.flipbook').bind('turned', function (event, page, view) {
    console.log('turned');
});

zooming缩放触发


在线咨询
上一篇：我为程序员找到的常用网站汇总
下一篇：js导入导出

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 天宁区 金堂县 龙游县 全南县 青白江区 宁陕县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服