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:用来覆盖原来的一张 ...
随机推荐
- vue-购物车
最终的实现效果: 需求分析: 购物车需要展示一个已加入购物车的商品列表,包含商品名称,商品单价,购买数量和操作等信息,还需要实时显示购买的总价.其中购买数量可以增加或减少,每类商品还可以从购物车中移除 ...
- MobileNets总结
Google在2017年上半年发表了一篇关于可以运行在手机等移动设备上的神经网络结构--MobileNets.MobileNets是基于深度可分离卷积(depthwise separable conv ...
- Springboot的默认定时任务——Scheduled注解
本博客参考博文地址. 1.pom依赖: 引入springboot starter包即可 <dependencies> <dependency> <groupId>o ...
- tcpdump抓包和scp导出以及wireshark查看
[命令和工具] tcpdump scp wireshark (1)tcpdump sudo tcpdump -i eth0 -w /home/tcpdump/1.pcap host 10.214.1 ...
- TypeScript学习笔记之类
TypeScript的类,简单地定义如下: class Person { x: number; // 默认为public类型 y: number; constructor(x1: number, y1 ...
- 【CSS3】动画animation-关键帧keyframes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Visual Studio Code 通过 Chrome插件Type Script断点调试Angular 2
1. 下载Visual Studio Code (https://code.visualstudio.com/) 2. 安装插件Debugger for chrome 3. 确定tsconfig.js ...
- ArcGIS API for JavaScript 4.2学习笔记[13] Layer的弹窗（PopupTemplate）
上一篇文章中讲到Popup是一个弹窗,是View对象的默认内置弹窗,并且在View对象构造时就顺便构造了. 那么这个PopupTemplate是什么呢? 后半截单词Template是"模板& ...
- 基于zepto的移动端日期和时间选择控件
前段时间给大家分享过一个基于jQuery Mobile的移动端日期时间拾取器,大家反应其由于加载过大的插件导致影响调用速度.那么今天我把从网络上搜集到的两个适合移动端应用的日期和时间选择插件分享给大家 ...
- iOS学习——UI相关小结
1 StoryBoard: 在Info.plist中可以查看Main storyboard,即入口storyboard,默认为main.storyboard,可以修改为自己创建的storybo ...