css-翻页
<!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-翻页的更多相关文章
- css翻页样式
/*=======================翻页样式===========================*/.pages { width: 660px; text-align: center; ...
- css实现翻页效果
如图,鼠标移动到图上,实现右上角翻页的效果,本例主要border边框的设置. 一.基本概念 <html> <head> <style> #demo{ width:0 ...
- css 制作翻页布局
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- webapp应用--模拟电子书翻页效果
前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...
- jquery css3问卷答题卡翻页动画效果
这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...
- HTML5翻页电子书
体验效果:http://hovertree.com/texiao/jquery/60/ 图片请用正方形的 参考:http://hovertree.com/h/bjaf/d339euw9.htmhttp ...
- [原创]纯CSS3打造的3D翻页翻转特效
刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...
- Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- C#_简单实用的翻页
简单实用的生成翻页HTML辅助类 C# using System.Text; namespace ClassLibrary { /// <summary> /// /// </sum ...
- 颗粒翻页（css3效果展示）
用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position:用来覆盖原来的一张 ...
随机推荐
- or1200处理器的异常处理类指令介绍
下面内容摘自<步步惊芯--软核处理器内部设计分析>一书 我们在计算机体系结构的学习中知道:中断实质上包含由外部事件引起的硬中断(又称外中断)和由内部预先安排的特定指令或内部异常引起的软中断 ...
- java枚举细节
1.在没有枚举之前,我们如果需要一些常量,比如说,我们想用一些常量来代替订单的几种状态,如已下单未付款.已付款未发货.已发货未确认收货.已收货未评价.已评价.我们会定义一个用来装常量的类,比如: p ...
- eclipse ctrl shift t 失效的恢复方法
Window-->Perspective-->Customize Perspective 在弹出框选择: Action Set Avaliability ---将最右边的java Navi ...
- 7.python常用模块
1.time 常用表示时间方式: 时间戳,格式化的时间字符串,元组(struct_time) UTC(Coordinated Universal Time,世界协调时)亦即格林威治天文时间,世界标准时 ...
- 图片验证码(Struts2中使用)
写在前面: 最近在项目中做了一个登录页面,用到了图片验证码的功能,所以记录一下.方便之后再有用到,直接拿来用即可.其实图片验证码的生成都是有固定步骤的,网上也有很多的例子,有的时候,如果不想深究,都是 ...
- scala写算法-用小根堆解决topK
topK问题是指从大量数据中获取最大(或最小)的k个数,比如从全校学生中寻找成绩最高的500名学生等等. 本问题可采用小根堆解决.思路是先把源数据中的前k个数放入堆中,然后构建堆,使其保持堆序(可以简 ...
- TensorFlow文档翻译-01-TensorFlow入门
版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/junyang/p/7429771.html TensorFlow入门 英文原文地址:https://w ...
- 阿里云ECS升级OpenSSL记录
1.下载OpenSSL wget https://www.openssl.org/source/openssl-1.1.0e.tar.gz 2.解压编译安装 tar xf openssl-1.1.0e ...
- Jmeter3.2版本中Generating Report Dashboard功能浅析
自从投入到Jmeter怀抱,一直想找到一个比较不错的测试结果报告模板用于展示,类似于Loadrunner中导出html那种,但是苦苦的寻找始终没有一款让我看上眼的,包括Jmeter自带的xsl,虽然展 ...
- Maven安装教程
一.安装Maven及配置环境变量 1.Maven官网地址:http://maven.apache.org/download.cgi 下载apache-maven-3.5.0-bin.zip文件 2. ...