<!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. websocket简单实例

    只需要两个文件即可,一个服务端,一个前端,一下示例为模拟简单的聊天程序: 服务端: package com.test.websocket; import java.io.IOException; im ...

  2. Java方法的概念及使用

    方法 将一段逻辑或者功能提取出来,这种提取的形式就是函数 格式 修饰符 返回值类型 函数名(参数列表){ 方法体: return 返回值; } //明确返回值类型---求两个整数的和,确定结果一定是整 ...

  3. 自学Python2.2-基本数据类型-列表list(object)

    Python List方法总结 一. 列表简介: 列表是序列对象,可包含任意的Python数据信息,如字符串.数字.列表.元组等   列表的数据是可变的,我们可通过对象方法对列表中的数据进行增加.修改 ...

  4. 深入理解计算机系统_3e 第八章家庭作业 CS:APP3e chapter 8 homework

    8.9 关于并行的定义我之前写过一篇文章,参考: 并发与并行的区别 The differences between Concurrency and Parallel +---------------- ...

  5. [UWP]了解模板化控件(10)：原则与技巧

    1. 原则 推荐以符合以下原则的方式编写模板化控件: 选择合适的父类:选择合适的父类可以节省大量的工作,从UWP自带的控件中选择父类是最安全的做法,通常的选择是Control.ContentContr ...

  6. 在servlet中使用@Autowired注解无法注入实例的问题

    今天在项目中碰到了一个奇怪的问题,原来的servlet中使用了HttpsWxService httpsWxService = new HttpsWxService()这一句代码,然后再HttpsWxS ...

  7. 【jQuery入门】(5)---jQuery CSS

    jQuery  CSS      1.jQuery 文档操作方法        1.addClass() 方法: addClass() 方法向被选元素添加一个或多个类.该方法不会移除已存在的 clas ...

  8. django+Echarts实现数据可视化

    1.实时异步加载(从mysql读取数据) 2.scatter散点图 3.雷达图(参数选择要注意) time_1 time_2 time_3 4.面积图 我上传的源码请到github下载:https:/ ...

  9. sqlserver 存储过程 增加

    CREATE PROCEDURE [dbo].[InsertMessage]( @strTable varchar(), --表名 @strValues nvarchar(), --要插入的数据(用英 ...

  10. 阿里云 Angular 2 UI框架 NG-ZORRO介绍

    说明: Angular2出来后,一直想找个基于Angular2的前端后台管理框架,但一直没有找到比较适合的.前段时间在Angular官网资源无意之间看到NG-ZORRO,NG-ZORRO由阿里计算平台 ...