当前位置：首页 > 网页特效 > 动画效果

HTML5 + CSS3 + JS超逼真翻书效果

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

这是一款大师级的html5翻书效果（翻页效果），这种翻书效果使用了css3 3d transform属性和少量的js来实现鼠标hover书本时，书本打开动画。注意：必须是支持css3 3d transform属性的浏览器才有效果。IE10看不到效果。本教程给大家带来一个非常有创意的翻书效果，使用的是css 3D transforms属性和css transitions属性。这里将给你展示两种不同的图书设计：精装书和平装书。这两种设计只需要简单的改变一些css样式、图片和其他一些小细节就可以完成
#### Hover on
当我们打开书的时候，书的封面的z-index从100改变到0，为了达到一种平滑过渡的效果，书的内页分别定义把不同的过渡时间。
```html
.book:hover > .hardcover_front {
    transform: rotateY(-145deg) translateZ(0);
    z-index: 0;
}
 
.book:hover > .page li:nth-child(1) {
    transform: rotateY(-30deg);
    transition-duration: 1.5s;
}
 
.book:hover > .page li:nth-child(2) {
    transform: rotateY(-35deg);
    transition-duration: 1.8s;
}
 
.book:hover > .page li:nth-child(3) {
    transform: rotateY(-118deg);
    transition-duration: 1.6s;
}
 
.book:hover > .page li:nth-child(4) {
    transform: rotateY(-130deg);
    transition-duration: 1.4s;
}
 
.book:hover > .page li:nth-child(5) {
    transform: rotateY(-140deg);
    transition-duration: 1.2s;
}
```
#### Hover off
当我们关书的时候，为了避免内页和封面产生重叠，我们可以减少页面的过渡时间。
```html

.hardcover_front{
    transition: all 0.8s ease, z-index 0.6s;
}
 
.page > li {
    width: 100%;
    height: 100%;
    transform-origin: left center;
    transition-property: transform;
    transition-timing-function: ease;
}
 
.page > li:nth-child(1) {
    transition-duration: 0.6s;
}
 
.page > li:nth-child(2) {
    transition-duration: 0.6s;
}
 
.page > li:nth-child(3) {
    transition-duration: 0.4s;
}
 
.page > li:nth-child(4) {
    transition-duration: 0.5s;
}
 
.page > li:nth-child(5) {
    transition-duration: 0.6s;
}
```
#### 封面设计
这个demo中的封面设计非常简单，精装书只是添加了一个coverDesign的class，并且用::after伪类为书添加一些背景和图片
```html
.coverDesign {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
 
.coverDesign::after {
    background-image: -webkit-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
    background-image: -moz-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
    background-image: linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
```
平装书则是使用了一个img来做封面。
```html
<img src="" width="100%" height="100%">
```
最后为它们添加一些好看的ribbon效果。

```html
<span class="ribbon"></span>
```

web299.com

HTML5 + CSS3 + JS超逼真翻书效果

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果