<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title></title>

    <style>

      .center-bg {

        position: relative;

        top: 100px;

        left: 300px;

        width: 500px;

        height: 500px;

        background-color: #ddd;

        border: 1px solid #fff;

      }

      .left-corner {

        position: absolute;

        left: 0;

        top: calc(100% - 100px);

        width: 0;

        height: 0;

        border-bottom: 100px solid #999;

        border-right: 100px solid transparent;

        transform: rotate3d(1,1,0,0deg);

      }

      .right-corner {

        position: absolute;

        top: calc(100% - 100px);

        left: calc(100% - 100px);

        width: 0;

        height: 0;

        border-bottom: 100px solid #999;

        border-left: 100px solid transparent;

      }

      @keyframes flipBook1

          {

            0%   {

                    transform: rotate3d(1,1,0,0deg);

                }

            100% {

                    transform: rotate3d(1,1,0,90deg);

            }

        }

      .flip-animation-1 {

              animation: flipBook1 2s forwards;

              -moz-animation: flipBook1 2s forwards; /* Firefox */

              -webkit-animation: flipBook1 2s forwards; /* Safari and Chrome */

              -o-animation: flipBook1 2s forwards; /* Opera */

          }

    </style>

  </head>

  <body>

    <div class="center-bg">

      <div class="content-area">

        <div>

          <div class="left-corner flip-animation-1">

          </div>

        </div>

        <div>

          <div class="right-corner">

          </div>

        </div>

      </div>

    </div>

  </body>

</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. 把项目放到码云上，通过git 进行项目管理

    1.在码云上新建一个项目 把使用 Readme文件初始化这个项目这个勾选去掉  项目生成后会看到 码云的git 简易的命令行入门教程: Git 全局设置: git config --global us ...

  2. 2017年国内常用的公共NTP服务

    安卓机顶盒里常用的 http://cn.pool.ntp.org CERNET 的一堆服务器就在那里面 http://asia.pool.ntp.org 追踪它的IP,台湾.韩国.日本都有. 阿里云 ...

  3. WebUploader分片断点上传文件（二）

    写在前面: 这几天,有去研究一下WebUploader上传文件,前面的博客有记录下使用WebUploader简单上传文件的例子,今天就把分片断点上传的例子也记录下吧,在博客园中,也查看了一些资料,基本 ...

  4. 智能合约语言 Solidity 教程系列5 - 数组介绍

    写在前面 Solidity 是以太坊智能合约编程语言,阅读本文前,你应该对以太坊.智能合约有所了解, 如果你还不了解,建议你先看以太坊是什么 本文前半部分是参考Solidity官方文档(当前最新版本: ...

  5. 【CSS3】浏览器内核、私有前缀

    浏览器内核 私有前缀 浏览器 webkit -webkit- chrome.safari.安卓.ios trident -ms- IE gecko -moz- firefox presto -o- o ...

  6. Python3 学习Python流程--试水中

    二.基础语法之后可以搭载服务器练习: 教程 一.1.Python 搭建环境. 初学基本语法 :Python基本语法 2.推荐 IDE :  PyCharm CE 下载 菜鸟教程都是基础语法,可以对py ...

  7. oracle初级（续）

    有志者.事竟成,破釜沉舟,百二秦关终属楚: 苦心人.天不负,卧薪尝胆,三千越甲可吞吴. oracle基本简单的用法,之前的笔记稍作整理一下,希望对各位有用,如有问题可在下方留言,所有SQL都是经过or ...

  8. ListView用法总结C#

    ListView是个较为复杂的控件     网上教程写的很乱,C#中文资料太匮乏了,小白叔叔觉得有必要自己出一份了. http://blog.sina.com.cn/s/blog_43eb83b901 ...

  9. 转：Siri之父：语音交互或将主导未来十年发展

    http://zhinengjiaohu.juhangye.com/201709/weixin_5664458.html Siri之父Adam Cheyer认为,语音交互很可能是未来十年内计算技术的一 ...

  10. 扩展1 - Python 获取当前时间的用法

    1.先导入库:import datetime 2.获取当前日期和时间:now_time = datetime.datetime.now() 3.格式化成我们想要的日期:strftime() 比如:“2 ...