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:用来覆盖原来的一张 ...
随机推荐
- 自学Python5.2-类、模块、包
类.模块.包 一.类 类的概念在许多语言中出现,很容易理解.它将数据和操作进行封装,以便将来的复用. 二.模块module 通常模块为一个文件,直接使用import来导入就好了.可以作为module ...
- 基于权限安全框架Shiro的登录验证功能实现
目前在企业级项目里做权限安全方面喜欢使用Apache开源的Shiro框架或者Spring框架的子框架Spring Security. Apache Shiro是一个强大且易用的Java安全框架,执行身 ...
- 自学Zabbix9.3 zabbix客户端自动注册
自学Zabbix9.3 zabbix客户端自动注册 1. 概述 网络自动发现配置,只要就是zabbix server去扫描一个网段,把在线的主机添加到Host列表中.但是Active agent是主动 ...
- 《TCP-IP详解卷3：TCP 事务协议、HTTP、NNTP和UNIX域协议》【PDF】下载
TCP-IP详解卷3:TCP 事务协议.HTTP.NNTP和UNIX域协议>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062539 ...
- Android studio导入eclipse项目（亲测）
之前上网搜索的时候,网上都说先用eclipse导出gradle,之后再用Android Studio的import project导入,但是这个方法使用的过程中会出现许多错误,解决了一个又一个还是不得 ...
- 【java设计模式】【结构模式Structural Pattern】装饰模式Decorator Pattern
public class Client { public static void main(String[] args) { Component component=new ConcreteCompo ...
- NFV、DPDK以及部分用户态协议研究
本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 对我而言,这是一个新的领域,很有意思. 一.解释名词: NFV(Network Functio ...
- iOS 5个Xcode开发调试技巧
转自Joywii的博客,原文:Four Tips for Debugging in XCode Like a Bro 1.Enable NSZombie Objects(开启僵尸对象) Enab ...
- SharedPreferences 存List集合，模拟数据库，随时存取
PS:SharedPreferences只要稍微学过一点就会用,他本身通过创建一个Editor对象,来存储提交,而editor可以存的格式为 他里面可以存一个Set<String> Set ...
- jquery获取焦点和失去焦点事件代码
input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面的文字就消失了. 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一劳永逸,遇到类似情况就来调 ...