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:用来覆盖原来的一张 ...
随机推荐
- Javaproject集成log4j 2.x
log4j2和log4j在配置文件和引入jar包上出现了不同.这里做个备忘,这里使用的版本号为apache-log4j-2.3-bin.zip. 1.apache-log4j-2.3-bin.zip下 ...
- backbone入门学习一
初识backbone 1.Backbone是什么? Backbone是一个非常轻量级的javaScript库,可以打造为模型(Model)-视图(View)-控制器(Controller)即MVC类结 ...
- MPSOC之2——ubuntu环境配置及petalinux安装
MPSOC的linux开发需要使用petalinux,选择Ubuntu操作系统. 1.Ubuntu 1.1. Ubuntu安装 版本16.04.03 vmare版本:12.0 安装时注意选择" ...
- 教程:安装禅道zentao项目管理软件github上的开发版
该文章转自:吕滔博客 直接从github拉下来的禅道的源码,是跑不起来的.除非你按我的教程来做...哈哈哈(不要脸)~~~~ 禅道官网提供的版本包是带了有安装文件,并有打包合成一些css.js文件的. ...
- 挂载mount、卸载umount、挂载光盘U盘
mount [root@localhost ~]# mount sysfs on /sys type sysfs (rw,nosuid,nodev,noexec,relatime,seclabel) ...
- iOS 设置视图背景的透明度
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #00afca } span.s1 { color: #fffff ...
- iOS 中Block以及Blocks的使用,闭包方法调用
OC: -(void)dataWithUrl:(NSString*)string AndId:(NSInteger)id returnName:(void(^)(NSString*name))back ...
- sftp新建用户步骤
1,切换root用户2,创建sftp组:groupadd sftp3,创建用户并限制进入路径:useradd -g sftp -s /bin/false testuser 修改密码: passwd t ...
- 【Zookeeper】源码分析目录
Zookeeper源码分析目录如下 1. [Zookeeper]源码分析之序列化 2. [Zookeeper]源码分析之持久化(一)之FileTxnLog 3. [Zookeeper]源码分析之持久化 ...
- CET-4- translation1
questions 2017/10/17 多年来,家长和老手都曾得到过这样一种信息(message):尽量利用任何机会表扬孩子,对他们所干的任何事情都要说好.据说这样做有助于提高孩子的自尊.但是近来许 ...