纯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 <a href="http://bloglaotou.duapp.com" target="_blank">sanyecao</a> ©2013 </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 <a href="http://bloglaotou.duapp.com" target="_blank">sanyecao</a> ©2013 </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程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...
随机推荐
- iOS开发之深入探讨runtime机制02-runtime的简单使用
runtime机制为我们提供了一系列的方法让我们可以在程序运行时动态修改类.对象中的所有属性.方法. 下面就介绍运行时一种很常见的使用方式,字典转模型.当然,你可能会说,“我用KVO直接 setVal ...
- uva 10158
并查集 #include <cstdio> #include <cstdlib> #include <cmath> #include <map> #in ...
- jquery 实现层级下拉框联动效果 代码
<select name="fCareId" id="fCareId"> <option selected="selected&qu ...
- 配置sql server2012属性 ms-help://MS.SQLCC.v10/MS.SQLSVR.v10.zh-CHS/s10de_5techref/html/6df812ad-4d80-4503-8a23-47719ce85624.htm
服务与服务器是两个不同的概念,服务器是提供服务的计算机,配置服务器主要是对内存.处理器.安全性等几个方面配置.由于SQL Server 2005服务器的设置参数比较多,这里选一些比较常用的介绍. 配置 ...
- node-firefox 二三事
编者按:本文作者为 Soledad Penadés, Sole 在 Mozilla 的 Tech Evangelism 团队工作,帮助人们在网络上创造神奇的东西.本文主要介绍node-firefox的 ...
- HDU 1546 Idiomatic Phrases Game（最短路，Dijsktra，理解题意很重要）
题目 1.注意因为要判断能不能到达,所以要在模版里面判断k有没有更新. 2.看懂题目意思和案例的解法很重要. #define _CRT_SECURE_NO_WARNINGS //题目大意:现要进行单词 ...
- POJ 1270 Following Orders (拓扑排序，dfs枚举)
题意:每组数据给出两行,第一行给出变量,第二行给出约束关系,每个约束包含两个变量x,y,表示x<y. 要求:当x<y时,x排在y前面.让你输出所有满足该约束的有序集. 思路:用拓扑排 ...
- Pycharm中的实用功能（网上看到的，感觉还不错）
实时比较 PyCharm 对一个文件里你做的改动保持实时的跟踪,通过在编辑器的左侧栏显示一个蓝色的标记.这一点非常方便,我之前一直是在Eclipse里面用命令“Compare against HEAD ...
- hdu 1426 Sudoku Killer
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1426 #include<stdio.h> #include<math.h> #in ...
- Sina App Engine(SAE)入门教程(8)- SaeFetchurl使用
fetchurl是什么? FetchURL是SAE为开发者提供的分布式网页抓取服务,用来同步的抓取http页面,FetchURL针对国内的网络的做了优化,内部有调度系统,尽可能保证用户快速的抓取到目标 ...