<!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简介

    在我们做web项目的过程中,经常需要做的一个模块是消息模块.典型的场景:一个商城系统的后台管理,我想实现如果前台有客户下单,后台就会接到消息,以便尽快发货处理. 要实现上述的功能,我们有几种备选的方案 ...

  2. NanUI文档 - 打包并使用内嵌式的HTML/CSS/JS资源

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...

  3. IOC容器在web容器中初始化过程——（二）深入理解Listener方式装载IOC容器方式

    先来看一下ContextServletListener的代码 public class ContextLoaderListener extends ContextLoader implements S ...

  4. iOS 本地项目上传github，github管理项目配置

    一.注册github账号   首先需要注册一个github账号,注册地址:https://github.com 接着会来到这 然后会收到一封github发的邮件,进入邮箱验证 二.创建个人的githu ...

  5. iOS UIWebView 加载进度条的使用-WKWebView的使用，更新2017.6.26

    1.由于项目中加载网络插件,直接使用了webview加载.使用了三方NJKWebViewProgress进度条的使用,近期在测试时发现,网络缓慢时出现白屏,有卡顿现象. 于是采用了WKWebView进 ...

  6. go实例之轻量级线程goroutine、通道channel与select

    1.goroutine线程 goroutine是一个轻量级的执行线程.假设有一个函数调用f(s),要在goroutine中调用此函数,请使用go f(s). 这个新的goroutine将与调用同时执行 ...

  7. SpringMVC 返回json的两种方式

    前后台数据交互使用json是一种很重要的方式.本文主要探讨SpringMVC框架使用json传输的技术. 请注意,本文所提到的项目使用Spring 版本是4.1.7,其他版本在具体使用上可能有不一样的 ...

  8. bzoj 1179: [Apio2009]Atm

    Description Input 第 一行包含两个整数N.M.N表示路口的个数,M表示道路条数.接下来M行,每行两个整数,这两个整数都在1到N之间,第i+1行的两个整数表示第i条道路 的起点和终点的 ...

  9. JMeter集合点

    位置:添加--> 定时器-->Synchronizing Timer     注意:集合点放在所有操作之前.   假设线程组线程数设置的是50个,那么希望50个都准备好一块上,那么集合点中 ...

  10. django xdmin使用

    我们来看看我们原先django给我们自带的admin后台是什么样子的呢 有人说,你的界面怎么那么丑,我说这个还叫丑吗,他说丑,我说你来,我看看你的,上图 看到登录界面后,我说别看了,我去修改,修改,我 ...