书翻页效果php,Css实现翻书效果

如何实现翻书效果在一些小说站中经常应用，其实实现起来也很简单，下面是用div+css

实现翻书效果。

body{

overflow: hidden;

margin: 0;

padding: 0;

}

#book{

position: absolute;

left: 50%;

top: 50%;

margin-left: -325px;

margin-top: -300px;

height: 600px;

width: 750px;

transform-style: preserve-3d;

transform:perspective(1000px) rotateX(60deg) rotateY(0deg);

transition: 1s;

}

#book:hover{

transform:perspective(1000px) rotateX(0deg) rotateY(0deg);

}

#book div{

height: 600px;

width: 750px;

text-align: center;

line-height: 600px;

position: absolute;

left: 0;

top: 0;

transform-origin: left;

transition: 1s;

}

#book div:nth-of-type(odd){

background: orange;

}

#book div:nth-of-type(even){

background: yellow;

}

#book:after{

content: "";

position: absolute;

width: 600px;

height: 5px;

background: rgba(0,0,0,0.8);

left:75px;

z-index: -2;

bottom: -10px;

border-radius: 70%;

box-shadow: 0px 0px 25px 15px rgba(0,0,0,0.8);

}

window.οnlοad=function(){

var book=document.getElementById("book");

var pages=book.getElementsByTagName("div");

var pageNumber=4,rota=-180;

book.οnclick=function(){

book.style.left="65%";

pages[pageNumber].style.transform="rotateY("+rota+"deg)";

pageNumber--;

rota+=10;

if(pageNumber<0){

for(var i=0;i

pages[i].style.transform="rotateY(0deg)";

}

book.style.left="50%";

pageNumber=4;

rota=-180;

}

书翻页效果php,Css实现翻书效果相关推荐

android 日历翻页动画,Android 仿日历翻页、仿htc时钟翻页、数字翻页切换效果
废话不多说,效果图: 自定义控件找自网络,使用相对简单,具体还没有来得及深入研究,只是先用笨方法大概实现了想要的效果,后续有空会仔细研究再更新文章, 本demo切换方法是用的笨方法,也就是由新数字和旧 ...
linux vim命令翻页,详解Vim编辑器翻页控制命令
导读当我们再Linux中的Vim编辑器查看脚本时,按上下键查看是不是非常慢?这个时候就要用到我们的翻页快捷键了. 快捷键命令如下: 整页翻页命令为: Ctrl + f 键 f 的英文全拼为:forw ...
如何将ps滑动条转换为matlab,怎么用MATLAB制作翻页教程|MATLAB如何制作翻书效果 - PS下...
如何制作这样一个翻页式广告的效果?其实本来想用PS,但是这个用Ps处理不是很方便,可能关键原因在于我没有找到如何快速地将一个图片不断地进行切割,压缩,切割压缩的实现方法,所以我采用MATLAB做了一下 ...
android 仿真翻页动画,Android 两Activity之间动画效果（1）---------翻页效果
用Android rotate动画实现翻页效果,效果如图: 要实现上面动画,首先搞明白rotate动画原理: (1)Degrees坐标: 0度(360度) 270度 90度顺时针旋转 180 (2 ...
html相册翻页效果图,js实现相册翻页，滚动，切换，轮播功能
在完成web图片各种功能上,很多框架有很绚丽的效果,但今天我们来看看用原生的js如何简单的实现这些功能.欢迎大家交流指正. 1.相册左右点击翻页功能实现步骤 1.需要一个HTML标签img,添加一张 ...
qtablewidget翻页禁止_PyQt—QTableWidget实现翻页功能
主要使用QTableWidget中的三个函数实现: verticalScrollBar().setSliderPosition() 设置当前滑动条的位置 verticalScrollBar().max ...
vue实现上下滑动翻页_vue 简单实现左右翻页功能
思路: 首先先设一个div把文章内容放进去,超出部分进行隐藏,column-width:300px;用这个属性把这个文章内容按列分开,每一列300px,,翻页时用这个属性transform:trans ...
oracle数据库如何写翻页_ORACLE数据库分页查询/翻页最佳实践
ORACLE数据库分页查询/翻页最佳实践一.示例数据: Select Count(*) From dba_objects ; ----------------------------------- ...
linux中翻页的快捷键,linux屏幕翻页快捷键快捷编辑
屏幕翻页快捷键 shift+PgUp 向前翻看,一般翻13页左右. shift+PgDown 向后翻看,一般翻13页左右. 我们翻阅目录和打开文件后,经常会由于输出内容太多,使一屏无法显示,所以我们要 ...

书翻页效果php,Css实现翻书效果

书翻页效果php,Css实现翻书效果相关推荐

最新文章

热门文章