1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title></title>
  8.     <style>
  9.       .center-bg {
  10.         position: relative;
  11.         top: 100px;
  12.         left: 300px;
  13.         width: 500px;
  14.         height: 500px;
  15.         background-color: #ddd;
  16.         border: 1px solid #fff;
  17.       }
  18.       .left-corner {
  19.         position: absolute;
  20.         left: 0;
  21.         top: calc(100% - 100px);
  22.         width: 0;
  23.         height: 0;
  24.         border-bottom: 100px solid #999;
  25.         border-right: 100px solid transparent;
  26.  
  27.         transform: rotate3d(1,1,0,0deg);
  28.       }
  29.       .right-corner {
  30.         position: absolute;
  31.         top: calc(100% - 100px);
  32.         left: calc(100% - 100px);
  33.         width: 0;
  34.         height: 0;
  35.         border-bottom: 100px solid #999;
  36.         border-left: 100px solid transparent;
  37.       }
  38.  
  39.       @keyframes flipBook1
  40.           {
  41.             0%   {
  42.                     transform: rotate3d(1,1,0,0deg);
  43.                 }
  44.  
  45.             100% {
  46.                     transform: rotate3d(1,1,0,90deg);
  47.             }
  48.         }
  49.       .flip-animation-1 {
  50.               animation: flipBook1 2s forwards;
  51.               -moz-animation: flipBook1 2s forwards; /* Firefox */
  52.               -webkit-animation: flipBook1 2s forwards; /* Safari and Chrome */
  53.               -o-animation: flipBook1 2s forwards; /* Opera */
  54.           }
  55.     </style>
  56.   </head>
  57.   <body>
  58.     <div class="center-bg">
  59.       <div class="content-area">
  60.         <div>
  61.           <div class="left-corner flip-animation-1">
  62.  
  63.           </div>
  64.         </div>
  65.         <div>
  66.           <div class="right-corner">
  67.  
  68.           </div>
  69.         </div>
  70.       </div>
  71.     </div>
  72.   </body>
  73. </html>

css-翻页的更多相关文章

  1. css翻页样式

    /*=======================翻页样式===========================*/.pages { width: 660px; text-align: center; ...

  2. css实现翻页效果

    如图,鼠标移动到图上,实现右上角翻页的效果,本例主要border边框的设置. 一.基本概念 <html> <head> <style> #demo{ width:0 ...

  3. css 制作翻页布局

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  4. webapp应用--模拟电子书翻页效果

    前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...

  5. jquery css3问卷答题卡翻页动画效果

    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...

  6. HTML5翻页电子书

    体验效果:http://hovertree.com/texiao/jquery/60/ 图片请用正方形的 参考:http://hovertree.com/h/bjaf/d339euw9.htmhttp ...

  7. [原创]纯CSS3打造的3D翻页翻转特效

    刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...

  8. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  9. C#_简单实用的翻页

    简单实用的生成翻页HTML辅助类 C# using System.Text; namespace ClassLibrary { /// <summary> /// /// </sum ...

  10. 颗粒翻页（css3效果展示）

    用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position:用来覆盖原来的一张 ...

随机推荐

  1. 浅谈MySQL中的查询优化

    mysql的性能优化包罗甚广: 索引优化,查询优化,查询缓存,服务器设置优化,操作系统和硬件优化,应用层面优化(web服务器,缓存)等等.这里的记录的优化技巧更适用于开发人员,都是从网络上收集和自己整 ...

  2. JQuery插件开发标准写法

    ;//step01 定义JQuery的作用域 (function ($) { //step03-a 插件的默认值属性 var defaults = { prevId: 'prevBtn', prevT ...

  3. 第五章——定时器Timer序言

    定时器很重要. 上家公司有用的,是用来做定期数据同步的. 以前老同学有用到,曾经就定时器讨论过一次,还给过一次他我关于spring-task的总结. 但是并没有意识到定时器与多线程的关系,或者说,上一 ...

  4. idea的快捷键

    idea的快捷键大全 Alt+回车 导入包,自动修正 Ctrl+N   查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L  格式化代码 Ctrl+Alt+O 优化导入的类和包 Alt+ ...

  5. MPSOC之9——host、embeded间tftp、nfs、ftp环境搭建

    tftp 可传输单个文件,不能传文件夹 需要通过命令传输文件,略显复杂 ==一般调试kernel时,用uboot通过tftp方式启动,不用每次都烧写存储介质== nfs 在host linux(ubu ...

  6. windows7 创建http 服务器

    利用windows7 操作系统自带的功能创建http 服务器 方法/步骤     打开控制面板--程序---开启和关闭windows功能.   选择IIS(internet information S ...

  7. JAVA 实现tail -f 日志文件监控功能

    工具: <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</ar ...

  8. jsp程序设计：jstl之JSTL标签库

    转载自:http://www.blogjava.net/haizhige/archive/2008/10/26/236783.html,个人进行了一些修改. 前言:写一个taglib一般可以继承Sim ...

  9. 搭建lnmp教程

    LNMP指的是一个基于CentOS/Debian 上安装Nginx.PHP.MySQL.php.可以在独立主机上轻松的安装LNMP生产环境. 1 安装nginx 如果是一台新的服务器可直接安装(若以前 ...

  10. hash_equals()函数

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/92 了解下hash_equals的概念: bool hash_e ...