技术标签: css3 书页卷脚
[HTML] 纯文本查看 复制代码
蚂蚁部落* {
padding: 0;
margin: 0;
}
body, html {
height: 100%;
}
body {
/*
perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果。
z>0的三维元素比正常大,而z<0时则比正常小,大小程度由该属性的值决定。
默认情况下,消失点位于元素的中心,但是可以通过设置perspective-origin属性来改变其位置。
*/
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
background-color: #212121;
font-family: '微软雅黑';
}
.book {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
width: 300px;
height: 300px;
background-color: #fff;
-webkit-transform: rotateX(30deg);
-ms-transform: rotateX(30deg);
-o-transform: rotateX(30deg);
transform: rotateX(30deg);
}
.preserve-3d {
/*transform-style属性指定了,该元素的子元素是(看起来)位于三维空间内,还是在该元素所在的平面内被扁平化。*/
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.book-page {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
border: 1px solid #1976D2;
text-align: center;
}
.book-page-box {
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
@keyframes flipBook1 {
0% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(-160deg);
-ms-transform: rotateY(-160deg);
-o-transform: rotateY(-160deg);
transform: rotateY(-160deg);
}
100% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
/* Firefox */
@-moz-keyframes flipBook1 {
0% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(-160deg);
-ms-transform: rotateY(-160deg);
-o-transform: rotateY(-160deg);
transform: rotateY(-160deg);
}
100% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
/* Safari and Chrome */
@-webkit-keyframes flipBook1 {
0% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(-160deg);
-ms-transform: rotateY(-160deg);
-o-transform: rotateY(-160deg);
transform: rotateY(-160deg);
}
100% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
/* Opera */
@-o-keyframes flipBook1 {
0% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(-160deg);
-ms-transform: rotateY(-160deg);
-o-transform: rotateY(-160deg);
transform: rotateY(-160deg);
}
100% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
@keyframes flipBook2 {
0% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(-150deg);
-ms-transform: rotateY(-150deg);
-o-transform: rotateY(-150deg);
transform: rotateY(-150deg);
}
100% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
/* Firefox */
@-moz-keyframes flipBook2 {
0% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(-150deg);
-ms-transform: rotateY(-150deg);
-o-transform: rotateY(-150deg);
transform: rotateY(-150deg);
}
100% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
/* Safari and Chrome */
@-webkit-keyframes flipBook2 {
0% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(-150deg);
-ms-transform: rotateY(-150deg);
-o-transform: rotateY(-150deg);
transform: rotateY(-150deg);
}
100% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
/* Opera */
@-o-keyframes flipBook2 {
0% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(-150deg);
-ms-transform: rotateY(-150deg);
-o-transform: rotateY(-150deg);
transform: rotateY(-150deg);
}
100% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
@keyframes flipBook3 {
0% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(-140deg);
-ms-transform: rotateY(-140deg);
-o-transform: rotateY(-140deg);
transform: rotateY(-140deg);
}
100% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
/* Firefox */
@-moz-keyframes flipBook3 {
0% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(-140deg);
-ms-transform: rotateY(-140deg);
-o-transform: rotateY(-140deg);
transform: rotateY(-140deg);
}
100% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
/* Safari and Chrome */
@-webkit-keyframes flipBook3 {
0% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(-140deg);
-ms-transform: rotateY(-140deg);
-o-transform: rotateY(-140deg);
transform: rotateY(-140deg);
}
100% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
/* Opera */
@-o-keyframes flipBook3 {
0% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(-140deg);
-ms-transform: rotateY(-140deg);
-o-transform: rotateY(-140deg);
transform: rotateY(-140deg);
}
100% {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
/*书的封面*/
.book-page-1 .page-front {
background-color: #1976D2;
}
.book-page-1 .page-back {
background-color: #fff;
}
.book-page-1 .page-front p {
font-size: 30px;
color: #fff;
margin-top: 100px;
}
.flip-animation-1 {
animation: flipBook1 17s;
-moz-animation: flipBook1 17s; /* Firefox */
-webkit-animation: flipBook1 17s; /* Safari and Chrome */
-o-animation: flipBook1 17s; /* Opera */
}
/*书的第二页*/
.book-page-2 .page-back, .book-page-2 .page-front {
background-color: #fff;
}
.book-page-2 .page-front p {
font-size: 30px;
color: #1976D2;
margin-top: 100px;
}
.flip-animation-2 {
animation: flipBook2 13s 2s;
-moz-animation: flipBook2 13s 2s; /* Firefox */
-webkit-animation: flipBook2 13s 2s; /* Safari and Chrome */
-o-animation: flipBook2 13s 2s; /* Opera */
}
/*书的第三页*/
.book-page-3 .page-back, .book-page-3 .page-front {
background-color: #fff;
}
.book-page-3 .page-front p {
font-size: 30px;
color: #1976D2;
margin-top: 100px;
}
.flip-animation-3 {
animation: flipBook3 10s 3s;
-moz-animation: flipBook3 10s 3s; /* Firefox */
-webkit-animation: flipBook3 10s 3s; /* Safari and Chrome */
-o-animation: flipBook3 10s 3s; /* Opera */
}
/*书的第四页*/
.book-page-4 .page-front p {
font-size: 30px;
color: #1976D2;
margin-top: 100px;
}
第三页
第二页
第一页
翻页特效
flip-book
文章浏览阅读153次。node 与vue-cli之间跨域解决方案在vue-cli中proxyTable中如下配置相当于localhost:8080=>localhost:2000 其中的api用来代理一下 接口所在位置为localhost:2000 上 ,本地项目启动在8080 上_node vue proxytable
文章浏览阅读1.8w次。1. 电脑桌面的图标任务栏都不见了怎么办,右击鼠标也没反应解决电脑桌面的图标任务栏都不见了怎么办,右击鼠标也没反应的步骤如下:1.按WIN+R键打开运行窗口。在运行对话框中输入regedit,点击确认进入注册表编辑器。2.在注册表编辑器窗口中依次展开:HKEY_CURRENT_USER\Software;在Software的展开项中找到Microsoft,再展开Microsoft;在Micr..._微信任务栏图标不见了
文章浏览阅读928次。接口测试详解本文主要讲软件接口一、什么是接口?硬件接口:硬件接口指的是硬件提供给外界的一种实体。主要作用是内部数据分离出外 部的沟通方法目的是:沟通外部来改变内部的数据。如:USB接口,投影仪接口软件接口:软件接口指的是软件提供给外界的一种服务员。主要作用是内部数据分离外 部的沟通方法。目的是:通过外部来改变内部的数据。如:微信的提现和充值的操作, 调用银行对外开发的接口(支付、提现)这些接口有权控制(token(鉴权码),key, appkey)本质:其实就是一个方法,方法有参数和返回值_硬件接口测试
文章浏览阅读6.6k次。今天给大家分享下我对于Object.defineProperty作用的理解,闲话不多说,我们直接进入正题吧;对象是由多个名/值对组成的无序的集合。对象中每个属性对应任意类型的值。定义对象可以使用构造函数或字面量的形式:除了以上添加属性的方式,还可以使用Object.defineProperty定义新属性或修改原有的属性。 Object.defineProperty()..._object defineproperty有什么用
文章浏览阅读1.1w次,点赞14次,收藏60次。数值微分法(DDADDADDA)一、原理假定直线的起点、终点分别为:(x0,y0)(x_0,y_0)(x0,y0),(x1,y1)(x_1,y_1)(x1,y1),且都为整数。则过端点P0(x0,y0)P_0 (x_0, y_0)P0(x0,y0),P1(x1,y1)P_1(x_1, y_1)P1(x1,y1)的直线段L:y=kx+bL:y=kx+bL:y=kx+b,直线斜率为:k=y1−y0x1−x0 (x1≠x0)k=\frac{y_1-y_0}{x_1-x_数值微分
文章浏览阅读561次。安装目录:/home/softwares #confluence软件存放目录/home/finance/App/confluence #confluence系统安装目录/home/finance/Data/confluence #confluence数据存放目录[root@192 ~]# mkdir -p /home/softwares[root@192 ~]# mkdir -p /home/finance01/App/confluence[root@..._centos 开启confluence关闭
文章浏览阅读4.3k次。android最简单手机地图APP——只有三部分。第一部分首先建立一个MapActivity在setContentView(R.layout.activity_map);中创建一个WebView>代码如下。[html] view plain copy xml version="1.0" encoding="utf-8"?> RelativeLayout _如何发布手机地图app
文章浏览阅读588次。首先,在res下面新建一个文件夹drawable,在drawable下面新建三个xml文件:shape_corner_down.xml、shape_corner_up.xml和shape_corner.xml,分别是下面两个角是圆角边框,上面两个角是圆角边框,四个角全部是圆角边框。shape_corner_down.xml:
文章浏览阅读3.3k次。mysql之前一直都是在内网访问,前阵子为了方便在外网开发,将端口映射到了外网,但是同事在查询时发现,连接的速度很快,但是在select的时候,非常的慢,本来几毫秒可以查询出来的语句,现在需要1百多秒,实在无法忍受。起初我以为是映射关系的问题,在网络侧一直排查,因为使用的是mariadb,也怀疑是mariadb的问题,还装了mysql5.7来验证,结果还是非常慢。后面在navicat客户端_mysql 通过 端口映射非常慢
文章浏览阅读3.6k次。今天在看一个makefile时看到了gcc -W -Wall....这句,不明其理,专门查看了gcc的使用手册。-w的意思是关闭编译时的警告,也就是编译后不显示任何warning,因为有时在编译之后编译器会显示一些例如数据转换之类的警告,这些警告是我们平时可以忽略的。-Wall选项意思是编译后显示所有警告。-W选项类似-Wall,会显示警告,但是只显示编译器认为会出_gcc 中的-wall和-werror有什么作用
文章浏览阅读8.9k次,点赞5次,收藏7次。不只是格式化,还能去除一些空行,进行类成员位置排序,去除多余导入等1.选择要格式化的项目->右键2.选择导入优化与代码格式化两个选项,filters选择all places..._idea 全局import
文章浏览阅读180次。Dandelion's uncle is a boss of a factory. As the spring festival is coming , he wants to distribute rewards to his workers. Now he has a trouble about how to distribute the rewards. The workers wil