利用js和css怎样制作一个书本翻页的效果

html-css05

利用js和css怎样制作一个书本翻页的效果,第1张

首先创建一个div元素容纳文本信息(可以包含更多元素),class取名为“狗耳朵”也就是卷角的意思:

.dog-eared-tip{

padding: 7.5px 5px 7.5px 20px

background: #DEAA2F

font-size: 13px

position: absolute

text-align: center

width: 100%

color: black

}

要玩转css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就包括X轴,Y轴,Z轴旋转。平移同理。(兼容测试:IE8及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)

使用方法:1、调用CSS样式:

<link rel="stylesheet" type="text/css" href="css/style.css" />

2、添加HTML代码:

将<!--效果html开始-->......<!--效果html结束-->之间的html和js代码;放在<body></body>之间。

他这个是用js监听 鼠标滑动事件然后给css3 属性实现的。首先让3个沾满屏幕的div隐藏。然后进入页面的时候展示第一个。等到滑动或者到了多少时间把其它的删除然后给想要展示的div家样式。