纯css3写的仿真图书翻页效果

对css3研究越深入，越觉得惊艳。css3说不上是万能的，但是它能实现的效果也超出了我的想象。它的高效率和动画效果的流畅性很多情况下能替代js的作用。个人习惯css3能实现的效果就不会用js,虽然在国内貌似没有css3的用武之地，这一点完成不能阻挡我对css3的热情。博主是一个地道的开源支持者，在学习css3的过程中写的一些demo会贴出来跟大家分享，都是一些想法最简单的实现，当然会有很多问题，希望大家指正，一起学习，一起进步。

下面贴一个纯css3实现的仿真图书翻页效果，只是一个很粗糙的雏形，后续会慢慢完善。欢迎大家提供宝贵的意见。

效果图

老规矩先上demo跟下载地址

查看示例

下载地址

下面是源码：

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>css3-book</title>

<style> 

footer {

font:14px/1.3 'Microsoft YaHei';

margin-top:150px;

color: #000;

font-size: 15px;

line-height: 1.6;

padding: 60px 20px 0;

text-align: center;

display: block;

}

footer a{

    color:#000;

    text-decoration:none;

}

footer a:hover{

    text-decoration:underline;

    }

@keyframes book

    {

    0%        {transform: rotate(0deg);left:0px;}

    25%        {transform: rotate(20deg);left:0px;}

    50%        {transform: rotate(0deg);left:500px;}

    55%        {transform: rotate(0deg);left:500px;}

    70%        {transform: rotate(0deg);left:500px;background:#1ec7e6;}

    100%    {transform: rotate(-360deg);left:0px;}

    }

@-webkit-keyframes book

    {

    0%        {-webkit-transform: rotate(0deg);left:0px;}

    25%        {-webkit-transform: rotate(20deg);left:0px;}

    50%        {-webkit-transform: rotate(0deg);left:500px;}

    55%        {-webkit-transform: rotate(0deg);left:500px;}

    70%        {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}

    100%    {-webkit-transform: rotate(-360deg);left:0px;}

    }

@-moz-keyframes book

    {

    0%   {-moz-transform: rotate(0deg);left:0px;}

    25%  {-moz-transform: rotate(20deg);left:0px;}

    50%  {-moz-transform: rotate(0deg);left:500px;}

    55%  {-moz-transform: rotate(0deg);left:500px;}

    70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}

    100% {-moz-transform: rotate(-360deg);left:0px;}

    }

@-o-keyframes book

    {

    0%   {transform: rotate(0deg);left:0px;}

    25%  {transform: rotate(20deg);left:0px;}

    50%  {transform: rotate(0deg);left:500px;}

    55%  {transform: rotate(0deg);left:500px;}

    70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}

    100% {transform: rotate(-360deg);left:0px;}

    }

    .container{

    position:relative;

    height:155px;

    width:236px;

    margin:40px auto;

    -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;

    -o-transform-style: preserve-3d;

     transform-style:preserve-3d;

    }

    .page2{

    width:236px;

    height:155px;

    overflow:hidden;

    -webkit-animation:page 5s ease 1s infinite alternate;

    -moz-animation:page 5s ease 1s infinite alternate;

    -o-animation:page 5s ease 1s infinite alternate;

    animation:page 5s ease 1s infinite alternate;

    }

    #page1

    {

     position:absolute;

     left:0px;

     width:236px;

     height:155px;

     overflow:hidden;

    }

    #page2

    {

     position:absolute;

     left:236px;

     width:0px;

     height:155px;

     overflow:hidden;

     -webkit-animation:page2 2s ease 1s infinite alternate;

     -moz-animation:page2 2s ease 1s infinite alternate;

     -o-animation:page2 2s ease 1s infinite alternate;

     animation:page2 2s ease 1s infinite alternate;

    }

    #page3

    {

     position:absolute;

     left:236px;

     width:0px;

     height:155px;

     overflow:hidden;

     -webkit-animation:page3 2s ease 1s infinite alternate;

     -moz-animation:page3 2s ease 1s infinite alternate;

     -o-animation:page3 2s ease 1s infinite alternate;

     animation:page3 2s ease 1s infinite alternate;

    }

    #page3 img{

    margin-left:-128px;

    -webkit-animation:pagei3 2s ease 1s infinite alternate;

    -moz-animation:pagei3 2s ease 1s infinite alternate;

    -o-animation:pagei3 2s ease 1s infinite alternate;

    animation:pagei3 2s ease 1s infinite alternate;

    }

    @-webkit-keyframes page2

    {

    from {width: 0px;left:236px}

    to {width: 128px;left:0px}

    }

    @-moz-keyframes page2

    {

    from {width: 0px;left:236px}

    to {width: 128px;left:0px}

    }

    @-o-keyframes page2

    {

    from {width: 0px;left:236px}

    to {width: 128px;left:0px}

    }

    @keyframes page2

    {

    from {width: 0px;left:236px}

    to {width: 128px;left:0px}

    }

    @-webkit-keyframes page3

    {

    from {width: 0px;left:236px}

    to {width: 128px;left:128px}

    }

    @-moz-keyframes page3

    {

    from {width: 0px;left:236px}

    to {width: 128px;left:128px}

    }

    @-o-keyframes page3

    {

    from {width: 0px;left:236px}

    to {width: 128px;left:128px}

    }

    @keyframes page3

    {

    from {width: 0px;left:236px}

    to {width: 128px;left:128px}

    }

    @-webkit-keyframes pagei3

    {

    from {margin-left:-236px}

    to {margin-left:-128px}

    }

    @-moz-keyframes pagei3

    {

    from {margin-left:-236px}

    to {margin-left:-128px}

    }

    @-o-keyframes pagei3

    {

    from {margin-left:-236px}

    to {margin-left:-128px}

    }

    @keyframes pagei3

    {

    from {margin-left:-236px}

    to {margin-left:-128px}

    }

</style>

</head>

<body>

<div class="container">

<div class="page" id="page1">

<img src="1.jpg"/>

</div>

<div class="page" id="page2">

<img src="2.jpg"/>

</div>

<div class="page" id="page3">

<img src="2.jpg"/>

</div>

</div>

<footer>Tutorial by &nbsp;&nbsp;<a href="http://bloglaotou.duapp.com" target="_blank">sanyecao</a>&nbsp;&nbsp;©2013&nbsp;&nbsp;</footer>

</body>

</html>

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>css3-book</title>

<style> 

footer {

font:14px/1.3 'Microsoft YaHei';

margin-top:150px;

color: #000;

font-size: 15px;

line-height: 1.6;

padding: 60px 20px 0;

text-align: center;

display: block;

}

footer a{

    color:#000;

    text-decoration:none;

}

footer a:hover{

    text-decoration:underline;

    }

@keyframes book

    {

    0%        {transform: rotate(0deg);left:0px;}

    25%        {transform: rotate(20deg);left:0px;}

    50%        {transform: rotate(0deg);left:500px;}

    55%        {transform: rotate(0deg);left:500px;}

    70%        {transform: rotate(0deg);left:500px;background:#1ec7e6;}

    100%    {transform: rotate(-360deg);left:0px;}

    }

@-webkit-keyframes book

    {

    0%        {-webkit-transform: rotate(0deg);left:0px;}

    25%        {-webkit-transform: rotate(20deg);left:0px;}

    50%        {-webkit-transform: rotate(0deg);left:500px;}

    55%        {-webkit-transform: rotate(0deg);left:500px;}

    70%        {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}

    100%    {-webkit-transform: rotate(-360deg);left:0px;}

    }

@-moz-keyframes book

    {

    0%   {-moz-transform: rotate(0deg);left:0px;}

    25%  {-moz-transform: rotate(20deg);left:0px;}

    50%  {-moz-transform: rotate(0deg);left:500px;}

    55%  {-moz-transform: rotate(0deg);left:500px;}

    70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}

    100% {-moz-transform: rotate(-360deg);left:0px;}

    }

@-o-keyframes book

    {

    0%   {transform: rotate(0deg);left:0px;}

    25%  {transform: rotate(20deg);left:0px;}

    50%  {transform: rotate(0deg);left:500px;}

    55%  {transform: rotate(0deg);left:500px;}

    70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}

    100% {transform: rotate(-360deg);left:0px;}

    }

    .container{

    position:relative;

    height:155px;

    width:236px;

    margin:40px auto;

    -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;

    -o-transform-style: preserve-3d;

     transform-style:preserve-3d;

    }

    .page2{

    width:236px;

    height:155px;

    overflow:hidden;

    -webkit-animation:page 5s ease 1s infinite alternate;

    -moz-animation:page 5s ease 1s infinite alternate;

    -o-animation:page 5s ease 1s infinite alternate;

    animation:page 5s ease 1s infinite alternate;

    }

    #page1

    {

     position:absolute;

     left:0px;

     width:236px;

     height:155px;

     overflow:hidden;

    }

    #page2

    {

     position:absolute;

     left:236px;

     width:0px;

     height:155px;

     overflow:hidden;

     -webkit-animation:page2 2s ease 1s infinite alternate;

     -moz-animation:page2 2s ease 1s infinite alternate;

     -o-animation:page2 2s ease 1s infinite alternate;

     animation:page2 2s ease 1s infinite alternate;

    }

    #page3

    {

     position:absolute;

     left:236px;

     width:0px;

     height:155px;

     overflow:hidden;

     -webkit-animation:page3 2s ease 1s infinite alternate;

     -moz-animation:page3 2s ease 1s infinite alternate;

     -o-animation:page3 2s ease 1s infinite alternate;

     animation:page3 2s ease 1s infinite alternate;

    }

    #page3 img{

    margin-left:-128px;

    -webkit-animation:pagei3 2s ease 1s infinite alternate;

    -moz-animation:pagei3 2s ease 1s infinite alternate;

    -o-animation:pagei3 2s ease 1s infinite alternate;

    animation:pagei3 2s ease 1s infinite alternate;

    }

    @-webkit-keyframes page2

    {

    from {width: 0px;left:236px}

    to {width: 128px;left:0px}

    }

    @-moz-keyframes page2

    {

    from {width: 0px;left:236px}

    to {width: 128px;left:0px}

    }

    @-o-keyframes page2

    {

    from {width: 0px;left:236px}

    to {width: 128px;left:0px}

    }

    @keyframes page2

    {

    from {width: 0px;left:236px}

    to {width: 128px;left:0px}

    }

    @-webkit-keyframes page3

    {

    from {width: 0px;left:236px}

    to {width: 128px;left:128px}

    }

    @-moz-keyframes page3

    {

    from {width: 0px;left:236px}

    to {width: 128px;left:128px}

    }

    @-o-keyframes page3

    {

    from {width: 0px;left:236px}

    to {width: 128px;left:128px}

    }

    @keyframes page3

    {

    from {width: 0px;left:236px}

    to {width: 128px;left:128px}

    }

    @-webkit-keyframes pagei3

    {

    from {margin-left:-236px}

    to {margin-left:-128px}

    }

    @-moz-keyframes pagei3

    {

    from {margin-left:-236px}

    to {margin-left:-128px}

    }

    @-o-keyframes pagei3

    {

    from {margin-left:-236px}

    to {margin-left:-128px}

    }

    @keyframes pagei3

    {

    from {margin-left:-236px}

    to {margin-left:-128px}

    }

</style>

</head>

<body>

<div class="container">

<div class="page" id="page1">

<img src="1.jpg"/>

</div>

<div class="page" id="page2">

<img src="2.jpg"/>

</div>

<div class="page" id="page3">

<img src="2.jpg"/>

</div>

</div>

<footer>Tutorial by &nbsp;&nbsp;<a href="http://bloglaotou.duapp.com" target="_blank">sanyecao</a>&nbsp;&nbsp;©2013&nbsp;&nbsp;</footer>

</body>

</html>

纯css3写的仿真图书翻页效果的更多相关文章

turn.js 图书翻页效果
今天用turn.js 做图书的翻页效果遇到问题: 图片路径总是出错调了一天,总算调出来了我用的thinkphp,其他的不知道是不是一样三个地方要改动: 1.后台查出地址注意的地方:1.地址要 ...
纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下在线预览下载地址实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下在线预览下载地址实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
一些纯css3写的公司logo
随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些复杂的动画,能替代很多以前js才能完成的工作,css3的作用还不止于此 ...
OC纯代码全手工打造ScroolView实现翻页
OC纯代码全手工打造ScroolView实现翻页 1. 概述分为三部分: 上部标题ScrollView 下部内容ScrollView 上部当前页标示线 2. 效果上下两部分都随着手势的滑动一块滑 ...
css3 利用perspective实现翻页效果和正方体以及翻转效果
要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 ...
turn.js中文API 写一个翻页效果的参数详细解释
$('.flipbook').turn({ width: 922, height: 600, elevation: 50, gradients: true, a ...
CSS3-----图片翻页效果的展示
在开发一个网站的过程中各种翻页效果数不胜数,在这里我将介绍一下简单的一种方法就是使用css3的旋转即可实现这种常见的效果: 显示效果如下: 首先是页面的布局,不用那么复杂; a标签的href属性,一般 ...
webapp应用--模拟电子书翻页效果
前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...

随机推荐

web服务器和应用服务器
通俗的讲,Web服务器传送(serves)页面使浏览器可以浏览,然而应用程序服务器提供的是客户端应用程序可以调用(call)的方法(methods).确切一点,你可以说:Web服务器专门处理HTTP请 ...
int a[5]={1,2,3,4,5}; int *p=(int*)(&a+1); printf("%d",*(p-1)); 答案为什么是5？
这个问题的关键是理解 &a a是一个数组名,也就是数组的首地址.对a进行取地址运算符,得到的是一个指向数组的指针!!!!这句话尤为重要!也就相当于int (*p) [5] = &a;p ...
synergy--共享你的键鼠
synergy用来分享一套键鼠,作用于多台主机.可作用于linux.Windows和mac平台.工作方式是:将一台主机作为服务器端,然后服务器端将会分享自己的键鼠,另一台主机作为客户端连接服务端就可以 ...
linux源代码阅读笔记高速缓冲区管理
高速缓冲区是文件系统访问块设备中数据的必经要道,为了访问文件系统等块设备上的数据,内核可以每次都访问块设备,进行读写操作. 为了提高系统性能,内核在内存中开辟一个高速数据缓冲区.在Linux内核中,高 ...
Linq查询Count、Sum、Min、Max、Average
原文地址:Linq——Count.Sum.Min.Max.Average作者:mousekitty Linq查询之Count.Sum.Min.Max.Average using System; usi ...
java基础知识回顾之javaIO类---FileWriter和FileReader
FileWriter类的构造方法定义如下: 1.public FileWriter(File file)throws IOException 字符流的操作比字节流操作好在一点,就是可以直接输出字符串了 ...
POJ1840Eps
http://poj.org/problem?id=1840 题意 : 有这样一个式子a1x13+ a2x23+ a3x33+ a4x43+ a5x53=0,给你五个系数的值,让你找出x1,x2,x3 ...
嘿嘿，JAVA里第一次运行单元测试成功，立存
按书上写的单元测试. 居然一次过,爽!!! package org.smart4j.chapter2.test; import java.util.HashMap; import java.util. ...
关于DotNetBar中DataGridViewX 自动全屏 Anchor属性无效问题
由于在DataGridViewX 中使用了控件DataGridViewCheckBoxXColumn会导致 Anchor属性无效问题化,具体原因未知,建议改换为系统自带的DataGridViewChe ...
Java中转UTC时间字符串(含有T Z)为local时间
在Java中我们需要转换相应格式的字符串,很多时候我们想到用SimpleDateFormat类来解析.但是最近我在调用一个第三方的接口时返回的 JSON字符串中有个expires字段的值是2014-0 ...

纯css3写的仿真图书翻页效果

纯css3写的仿真图书翻页效果的更多相关文章

随机推荐

热门专题