<!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. 四.RabbitMQ之发布/订阅（Publish/Subscribe）

    一.基础知识点 在上述章节中,我们理解的RabbitMQ是基于如下这种模式运作的. 而事实上,这只是我们简单化了的模型的结果,真正的模型应该是这样的. P:Producer 生产者,生产消息,把它放进 ...

  2. 传统controller与controllerAs

    传统controller与controllerAs(前面为传统,后面为controllerAs,分割线分隔): 路由模块: .state('home.packing', { url: '/packin ...

  3. 如何在MAC上安装SSHFS

    找了半天,试了各种方法,最后一种可行的方法. macOS 版本 10.12.6 具体看下面的说明: 安装Fuse 下载 osxfuse-3.6.3.dmg 并且安装. 链接 安装sshfs 下载ssh ...

  4. React学习总结（一）

    React学习总结 一.什么是React? 是Facebook公司开发的一套JS库 React的详细介绍https://www.jianshu.com/p/ae482813b791 二.老版本Reac ...

  5. Platt SMO 和遗传算法优化 SVM

    机器学习算法实践:Platt SMO 和遗传算法优化 SVM 之前实现了简单的SMO算法来优化SVM的对偶问题,其中在选取α的时候使用的是两重循环通过完全随机的方式选取,具体的实现参考<机器学习 ...

  6. 【java】计算一段代码执行时长java.lang.System类里的public static long currentTimeMillis()方法

    public class Test_currentTimeMillis { public static void main(String[] args) { long start=System.cur ...

  7. Vagrant安装完lnmp后，配置linux和windows共享文件并配置虚拟主机访问项目

    虚拟机目录下的Vagrantfile文件是vagrant的配置文件,如果想把虚拟机当作一台服务器,可以通过ip访问,需要修改配置文件进行配置. (1)第一步:打开虚拟机目录下的Vagrantfile文 ...

  8. Python3入门笔记（1） —— windows安装与运行

    Python的设计哲学是"优雅"."明确"."简单".这也是我喜欢Python的理由之一 Python的安装: 1.进入Python官方网站 ...

  9. iOS Swift基础知识代码

    推荐:Swift学习使用知识代码软件 //集合类型 数组 字典 func array1(){ var arr = [","dd"] //简单写法 var arr1 = [ ...

  10. inode 详解

    1.inode 解析: 存储文件元信息(文件创建者,创建日期,大小等)的区域叫做inode即 索引节点. 2.inode 内容: 文件字节数.拥有者UserID,GroupID,读写执行权限,时间戳, ...