`

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

css3仿真图书翻页动画 
阅读更多

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

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

效果图

a-pure-css3-book

老规矩先上demo跟下载地址

       查看示例
 
  纯css图书翻页效果  下载 (46.4 KB, 1 次)

下面是源码：

 
  1. <!DOCTYPE>   
  2. <html>   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
  5. <title>css3-book</title>   
  6. <style>    
  7.   
  8. footer {   
  9. font:14px/1.3 'Microsoft YaHei';   
  10. margin-top:150px;      
  11. color: #000;   
  12. font-size: 15px;   
  13. line-height: 1.6;   
  14. padding: 60px 20px 0;   
  15. text-align: center;   
  16. display: block;   
  17. }   
  18. footer a{   
  19.     color:#000;   
  20.     text-decoration:none;   
  21. }   
  22. footer a:hover{   
  23.     text-decoration:underline;   
  24.     }   
  25. @keyframes book   
  26.     {   
  27.     0%      {transform: rotate(0deg);left:0px;}   
  28.     25%     {transform: rotate(20deg);left:0px;}   
  29.     50%     {transform: rotate(0deg);left:500px;}   
  30.     55%     {transform: rotate(0deg);left:500px;}   
  31.     70%     {transform: rotate(0deg);left:500px;background:#1ec7e6;}   
  32.     100%    {transform: rotate(-360deg);left:0px;}   
  33.     }   
  34.   
  35. @-webkit-keyframes book   
  36.     {   
  37.     0%      {-webkit-transform: rotate(0deg);left:0px;}   
  38.     25%     {-webkit-transform: rotate(20deg);left:0px;}   
  39.     50%     {-webkit-transform: rotate(0deg);left:500px;}   
  40.     55%     {-webkit-transform: rotate(0deg);left:500px;}   
  41.     70%     {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}   
  42.     100%    {-webkit-transform: rotate(-360deg);left:0px;}   
  43.   
  44.     }   
  45.   
  46. @-moz-keyframes book   
  47.     {   
  48.     0%   {-moz-transform: rotate(0deg);left:0px;}   
  49.     25%  {-moz-transform: rotate(20deg);left:0px;}   
  50.     50%  {-moz-transform: rotate(0deg);left:500px;}   
  51.     55%  {-moz-transform: rotate(0deg);left:500px;}   
  52.     70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}   
  53.     100% {-moz-transform: rotate(-360deg);left:0px;}   
  54.     }   
  55.   
  56. @-o-keyframes book   
  57.     {   
  58.     0%   {transform: rotate(0deg);left:0px;}   
  59.     25%  {transform: rotate(20deg);left:0px;}   
  60.     50%  {transform: rotate(0deg);left:500px;}   
  61.     55%  {transform: rotate(0deg);left:500px;}   
  62.     70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}   
  63.     100% {transform: rotate(-360deg);left:0px;}   
  64.     }   
  65.     .container{   
  66.     position:relative;   
  67.     height:155px;   
  68.     width:236px;   
  69.     margin:40px auto;   
  70.     -webkit-transform-style: preserve-3d;   
  71.     -moz-transform-style: preserve-3d;   
  72.     -o-transform-style: preserve-3d;   
  73.      transform-style:preserve-3d;   
  74.     }   
  75.     .page2{   
  76.        
  77.     width:236px;   
  78.     height:155px;   
  79.     overflow:hidden;   
  80.     -webkit-animation:page 5s ease 1s infinite alternate;   
  81.     -moz-animation:page 5s ease 1s infinite alternate;   
  82.     -o-animation:page 5s ease 1s infinite alternate;   
  83.     animation:page 5s ease 1s infinite alternate;   
  84.     }   
  85.     #page1   
  86.     {   
  87.      position:absolute;   
  88.      left:0px;   
  89.      width:236px;   
  90.      height:155px;   
  91.      overflow:hidden;   
  92.     }   
  93.     #page2   
  94.     {   
  95.      position:absolute;   
  96.      left:236px;   
  97.      width:0px;   
  98.      height:155px;   
  99.      overflow:hidden;   
  100.      -webkit-animation:page2 2s ease 1s infinite alternate;   
  101.      -moz-animation:page2 2s ease 1s infinite alternate;   
  102.      -o-animation:page2 2s ease 1s infinite alternate;   
  103.      animation:page2 2s ease 1s infinite alternate;   
  104.     }   
  105.     #page3   
  106.     {   
  107.      position:absolute;   
  108.      left:236px;   
  109.      width:0px;   
  110.      height:155px;   
  111.      overflow:hidden;   
  112.      -webkit-animation:page3 2s ease 1s infinite alternate;   
  113.      -moz-animation:page3 2s ease 1s infinite alternate;   
  114.      -o-animation:page3 2s ease 1s infinite alternate;   
  115.      animation:page3 2s ease 1s infinite alternate;   
  116.     }   
  117.     #page3 img{   
  118.     margin-left:-128px;   
  119.     -webkit-animation:pagei3 2s ease 1s infinite alternate;   
  120.     -moz-animation:pagei3 2s ease 1s infinite alternate;   
  121.     -o-animation:pagei3 2s ease 1s infinite alternate;   
  122.     animation:pagei3 2s ease 1s infinite alternate;   
  123.     }   
  124.     @-webkit-keyframes page2   
  125.     {   
  126.     from {width: 0px;left:236px}   
  127.     to {width: 128px;left:0px}   
  128.     }   
  129.     @-moz-keyframes page2   
  130.     {   
  131.     from {width: 0px;left:236px}   
  132.     to {width: 128px;left:0px}   
  133.     }   
  134.     @-o-keyframes page2   
  135.     {   
  136.     from {width: 0px;left:236px}   
  137.     to {width: 128px;left:0px}   
  138.     }   
  139.     @keyframes page2   
  140.     {   
  141.     from {width: 0px;left:236px}   
  142.     to {width: 128px;left:0px}   
  143.     }   
  144.     @-webkit-keyframes page3   
  145.     {   
  146.     from {width: 0px;left:236px}   
  147.     to {width: 128px;left:128px}   
  148.     }   
  149.     @-moz-keyframes page3   
  150.     {   
  151.     from {width: 0px;left:236px}   
  152.     to {width: 128px;left:128px}   
  153.     }   
  154.     @-o-keyframes page3   
  155.     {   
  156.     from {width: 0px;left:236px}   
  157.     to {width: 128px;left:128px}   
  158.     }   
  159.     @keyframes page3   
  160.     {   
  161.     from {width: 0px;left:236px}   
  162.     to {width: 128px;left:128px}   
  163.     }   
  164.     @-webkit-keyframes pagei3   
  165.     {   
  166.     from {margin-left:-236px}   
  167.     to {margin-left:-128px}   
  168.     }   
  169.     @-moz-keyframes pagei3   
  170.     {   
  171.     from {margin-left:-236px}   
  172.     to {margin-left:-128px}   
  173.     }   
  174.     @-o-keyframes pagei3   
  175.     {   
  176.     from {margin-left:-236px}   
  177.     to {margin-left:-128px}   
  178.     }   
  179.     @keyframes pagei3   
  180.     {   
  181.     from {margin-left:-236px}   
  182.     to {margin-left:-128px}   
  183.     }   
  184. </style>   
  185. </head>   
  186. <body>   
  187. <div class="container">   
  188. <div class="page" id="page1">   
  189. <img src="1.jpg"/>   
  190. </div>   
  191. <div class="page" id="page2">   
  192. <img src="2.jpg"/>   
  193. </div>   
  194. <div class="page" id="page3">   
  195. <img src="2.jpg"/>   
  196. </div>   
  197. </div>   
  198. <footer>Tutorial by &nbsp;&nbsp;<a href="http://bloglaotou.duapp.com" target="_blank">sanyecao</a>&nbsp;&nbsp;©2013&nbsp;&nbsp;</footer>   
  199. </body>   
  200. </html>  
分享到：
| 纯css做的安卓开机动画
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯css3书本翻页动画特效

    【纯CSS3书本翻页动画特效】是一种利用现代浏览器对CSS3特性的支持，实现的仿真实体书本翻页效果。这种特效通常用于网页设计中，为用户提供更加直观和交互性强的阅读体验，常见于电子图书、在线文档或者展示类网站。...

    前端实现图书翻页(支持正向和逆向翻页)效果(含代码和演示视频)

    在前端开发中，实现图书翻页效果是一种常见的交互设计，它可以增强用户体验，使得网页看起来更加生动有趣。本项目采用HTML、CSS和JavaScript技术在浏览器环境中实现了图书翻页效果，不仅支持正向翻页，还支持逆向...

    html仿真翻页特效

    HTML仿真翻页特效是一种在网页上模拟真实书籍翻页效果的技术，它利用HTML、CSS和JavaScript等前端技术来实现。这种特效可以极大地提升用户的浏览体验，尤其适用于电子书、杂志或者展示类网站，使得用户在数字化阅读...

    纯CSS3书本打开翻页特效.zip

    【标题】"纯CSS3书本打开翻页特效"是一个基于现代Web技术的创新性设计，它利用了CSS3的强大功能来实现一个逼真的书本翻页效果。这个特效不仅在视觉上引人注目，而且能够为网页增添互动性和趣味性，特别适合用于在线...

    微信小程序开发纸质翻页效果源码-小程序翻页效果 uniapp实现

    在uniapp中实现翻页效果，可以利用其提供的组件和API，结合CSS3的3D变换，实现流畅的翻页动画。 实现纸质翻页效果的关键技术点有以下几点： 1. **3D变换**：利用CSS3的`transform`属性，设置`rotateY`和`...

    Vue实现简易翻页效果源码分享

    ### Vue实现简易翻页效果知识点详解 #### 知识点概述 本文将详细阐述如何使用Vue.js实现一个简易的翻页效果。通过分析给定的源码，我们将学习Vue的基础用法，事件处理，以及如何通过计算属性来实现分页逻辑。以下...

    html5基于插件实现的3D电子书翻页效果源码.zip

    这种效果能够模拟真实书籍翻页的感觉，为读者带来更沉浸式的阅读体验。 在HTML5中，实现3D翻页效果通常涉及到以下几个关键技术点： 1. **CSS3**：CSS3是CSS的最新版本，引入了大量新特性，如选择器、动画、过渡和...

    turn书本翻页插件

    总的来说，Turn.js 是一个强大且灵活的JavaScript插件，能够帮助开发者轻松地构建具有仿真翻页效果的数字出版物。通过理解其核心功能、配置选项以及API，你可以在项目中实现富有吸引力的交互体验。

    turn.js 模拟书籍翻页

    Turn.js 是一个强大的JavaScript库，专门用于在网页上创建具有真实感的书籍翻页效果。这个库使得开发者能够轻松地将HTML内容转化为可交互的、类似电子书的体验，为用户带来富有动态视觉效果的阅读体验。在描述中提到...

    看书翻页效果测试项目

    【看书翻页效果测试项目】是一个综合性的软件测试项目，主要关注的是电子书籍阅读软件中的翻页动画效果。这个项目是通过搜集网络上的各种资源，针对翻页效果进行整合优化，旨在解决之前翻页资源存在的不完整或存在小...

    html5 翻页图网页特效

    翻页图网页特效是HTML5中一种引人注目的交互式设计元素，它可以模拟真实的书籍翻页效果，使用户在浏览网页内容时感受到更生动、更沉浸式的体验。 在HTML5中实现翻页图特效，主要依赖于以下关键技术： 1. **Canvas...

    booke翻书效果js

    【标题】"booke翻书效果js"是一个JavaScript实现的图书翻页效果插件，它为网页中的电子书籍或文档提供了模拟真实翻书体验的功能。这个插件在网页上能够创建出逼真的3D翻页效果，使得用户在阅读电子内容时仿佛在操作...

    电子-一种电子书籍的翻页方法

    电子书籍的翻页方法不仅需要模拟纸质书的翻页效果，还要考虑到数字化阅读的便捷性和交互性。以下是对"一种电子书籍的翻页方法"这一主题的详细解读。 首先，我们要了解电子书籍的基本构成。电子书籍，通常以PDF、...

    手机移动端网页模拟真书翻页

    真书翻页效果是一种模拟真实书籍翻页体验的技术，它让读者在阅读电子书时仿佛在操作一本真实的书籍。这种效果不仅增强了用户的沉浸感，也提升了阅读体验。在移动端电子书中应用这种技术，可以吸引更多的用户，尤其是...

    基于turn.js实现翻书翻页动画效果.zip

    【标题】中的“基于turn.js实现翻书翻页动画效果”指的是使用JavaScript库Turn.js创建一个仿真的3D翻页效果，使得网页上的内容看起来像是真正的书籍在翻页。Turn.js是一个轻量级且功能强大的库，适用于创建具有互动...

    翻书效果代码

    【标题】"翻书效果代码"是指在网页上实现一种模拟真实书籍翻页效果的技术，让用户在浏览电子书籍或文档时能体验到如同翻阅实体书一样的视觉效果。这种技术通常用于在线阅读平台、电子杂志或者互动式产品展示中，为...

    jQuery全屏电子书翻页特效.zip

    HTML部分通常会构建出书籍的基本结构，每一页作为一个div元素，通过CSS3的透视（perspective）属性创建3D空间，使得翻页效果更逼真。CSS文件则负责设置页面样式和动画效果，如页面的初始和翻转状态，以及翻页过程中...

    vue 翻页组件vue-flip-page效果

    这个组件允许开发者实现类似纸质书籍的翻页效果，为用户带来更加直观和交互性强的体验。在本文中，我们将深入探讨Vue Flip Page的基本使用、核心功能以及如何在项目中集成。 首先，要使用Vue Flip Page，你需要通过...

    炫彩流光下拉翻页引导页源码.zip

    总的来说，这个源码提供了一种创新的引导页设计，结合了动态色彩效果和仿真的翻页交互，适用于那些希望提升用户首次使用体验的应用或网站。开发者可以通过研究和修改这些源码，进一步提升自己的前端技术能力，并创造...

    OneBook3D-逼真的jQuery翻书特效插件

    1. **3D渲染**：利用WebGL技术，OneBook3D能够在浏览器中创建出具有深度和立体感的3D翻页效果。WebGL是一种JavaScript API，用于在任何兼容的Web浏览器中进行硬件加速的3D图形渲染，无需插件。 2. **跨平台兼容**：...

Magicbox
Global site tag (gtag.js) - Google Analytics