对css3研究越深入,越觉得惊艳。css3说不上是万能的,但是它能实现的效果也超出了我的想象。它的高效率和动画效果的流畅性很多情况下能替代js的作用。个人习惯css3能实现的效果就不会用js,虽然在国内貌似没有css3的用武之地,这一点完成不能阻挡我对css3的热情。博主是一个地道的开源支持者,在学习css3的过程中写的一些demo会贴出来跟大家分享,都是一些想法最简单的实现,当然会有很多问题,希望大家指正,一起学习,一起进步。
下面贴一个纯css3实现的仿真图书翻页效果,只是一个很粗糙的雏形,后续会慢慢完善。欢迎大家提供宝贵的意见。
效果图
老规矩先上demo跟下载地址
纯css图书翻页效果 下载 (46.4 KB, 1 次)
下面是源码:
- <!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实现的翻页效果源码 鼠标悬停在页面上翻页,移开鼠标翻回来。 只支持webkit内核浏览器(如:iphone、ipad、android浏览器,及PC上的Chrome、Safari浏览器)
css3立体3D 翻页效果
纯CSS3书本打开翻页特效
一款CSS3特效的翻页效果,效果比较逼真,只是部分浏览器不支持
纯css3书本翻页动画特效
纯CSS写的TAB切换源代码,没JS。效果很棒!
css拖拽翻页效果.HTML css拖拽翻页效果.HTML
【html+css】翻页动画效果,64行代码实现翻页动画效果
纯CSS实现图片前后翻页效果
纯CSS写带边框的三角形
css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式...
css翻页效果代码,希望大家喜欢
介绍: 纯CSS实现翻页效果,原理比较简单,书签配合隐藏。
纯css实现相册翻页
BookBlock是一个jQuery插件,可用于创建小册子的组件,允许一个“翻页”的导航。可以将任何内容,如图像或文本。该插件的结构转换只在需要时(即当翻转页面)的网页,并使用了一些阴影效果。 请在支持CSS3属性的...
纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整...
随着CSS3+HTML5的发展,现在对它们的需求也越来越大,我这里是纯css3实现的折角效果,希望能帮到大家
通过纯CSS3,实现真实翻书动画效果。
第一期,给大家分享一个使用纯CSS实现书籍3D翻页效果, 相关CSS代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cloth</title> <style...