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:用来覆盖原来的一张 ...
随机推荐
- AVL树 & 重平衡概念
AVL树是有平衡条件的二叉搜索树.这个平衡条件必须容易保持,而且需要保证树的深度是O(logN). AVL=BBST 作为二叉搜索树的最后一部分,我们来介绍最为经典的一种平衡二叉搜索树:AVL树.回顾 ...
- 本地IIS
一,搭建IIS 要建立本地的IIS需要进行以下操作(包括显示.NET): 开始=>控制面板(查看方式为类别)=>程序=>程序和功能=>左边的打开或关闭Windows功能选中以下 ...
- ansible编译httpd playbook示例
以下是playbook的内容.它的处理流程是: 1.先在本地下载apr,apr-util,httpd共3个.tar.gz文件. 2.解压这3个文件. 3.安装pcre和pcre-devel依赖包. 4 ...
- java前后端分离是否会成为趋势
现在项目当中使用的是springboot+springcloud,这套框架也用了半年了,springboot是spring4.0的升级版,简化了springmvc的xml配置,是spring家族中目前 ...
- 《On Writing Well 30th Anniversa》【PDF】下载
<On Writing Well 30th Anniversa>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382210 内容简 ...
- loadrunner设置分压机 压力测试
压力机设置分压机使用场景: 当本地主机内存较小,运行速度较慢,压力较大等多种需求场景下,可以使用分压机. 一.将另一台机器设置为压力机 1,开始菜单找到HP LoadRunner-->Advan ...
- vs code调试console程序报错--preLaunchTask“build”
网上有其他大神给出的建议是注释掉launch.json中的 "preLaunchTask": "build", 但是这种方式也会造成一个问题,就是再使用F5调试 ...
- GVIM与模板——让FPGA开发变得更简单
还在使用FPGA开发环境自带的代码编辑器?还在逐个字母敲击冗长重复的代码?明德扬至简设计法让你快速提高代码编写效率!利用GVIM这一高效的编辑工具并添加自定义模板,通过简短的脚本命令即可自动生成所有常 ...
- NET Framework 版本和依赖关系
原文:https://docs.microsoft.com/zh-cn/dotnet/framework/migration-guide/versions-and-dependencies 每个版本的 ...
- 【ASP.NET MVC系列】浅谈NuGet在VS中的运用
一 概述 在我们讲解NuGet前,我们先来看看一个例子. 1.例子: 假设现在开发一套系统,其中前端框架我们选择Bootstrap,由于选择Bootstrap作为前端框架,因此,在项目中,我们 ...