翻书效果：

书籍封面、背面、内容页都可自由更改。点击即实现高流畅度的翻页效果

代码如下：

小程序html代码：

<view class="boxbook"><view class="cover-page"><image class="book" style="width: 150rpx;" mode="widthFix" src="你的图片地址"></image></view><view class="inside-page"></view><view class="inside-page"></view><view class="inside-page"></view><view class="inside-page"></view><view class="end-page"></view></view>

boxbook下的每一个view里面可以自己放置内容，我这里就放置了一个图片作为封面。头尾两个view作为书的封面和书的背面。

css代码：

代码中的-webkit 是表示针对 safari 浏览器支持，-ms表示针对 IE 浏览器支持。*/

/*boxbook定义书的长宽大小的*/
.boxbook {width: 150rpx;height: 220rpx;
}
.boxbook view {position: absolute;/*给所有view绝对定位*/border-radius: 0 8rpx 8rpx 0;/*圆角属性*/box-shadow: 0 1rpx 20rpx 5rpx rgba(0, 0, 0, 0.08);/*书页的阴影*/
}
/*给封面添加渐变背景和大小*/
.cover-page {width: 100%;height: 100%;background-image: -webkit-linear-gradient(bottom left, #7083ff, #75a1ff);background-image: linear-gradient(to top right, #7083ff, #75a1ff);
}
/*给封底页添加渐变属性和大小*/
.end-page {background-image: -webkit-linear-gradient(bottom left, #6e9aff, #5d7bff);background-image: linear-gradient(to top right, #6e9aff, #5d7bff);width: 100%;height: 100%;
}
/*给内容页添大小定位以及默认底色和边框*/
.inside-page {width: 96%;height: 96%;left: 0;top: 2%;border: 1px lightgray solid;background-color: #fcf9f4;
}
/*开启css中的3D*/
.boxbook {-webkit-perspective: 800px;perspective: 800px;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;
}
.boxbook view {/*旋转方向向左 详细解释在下面*//*-webkit 是表示针对 safari 浏览器支持，-ms表示针对 IE 浏览器支持。*/-webkit-transform-origin: left;transform-origin: left;
}
/* nth-of-type(*)是选择器匹配同类型中的第n个同级兄弟元素-从1开始 */
.boxbook view:nth-of-type(1) {-webkit-transform: rotateY(0deg);transform: rotateY(0deg);
}
.boxbook view:nth-of-type(2) {-webkit-transform: rotateY(5deg);transform: rotateY(5deg);
}
.boxbook view:nth-of-type(3) {-webkit-transform: rotateY(10deg);transform: rotateY(10deg);
}
.boxbook view:nth-of-type(4) {-webkit-transform: rotateY(15deg);transform: rotateY(15deg);
}
.boxbook view:nth-of-type(5) {-webkit-transform: rotateY(20deg);transform: rotateY(20deg);
}
.boxbook view:nth-of-type(6) {-webkit-transform: rotateY(25deg);transform: rotateY(25deg);
}/*鼠标离开页面回翻的旋转时间*/
.boxbook view:nth-of-type(1) {-webkit-transition: 1s;transition: 1s;
}
.boxbook view:nth-of-type(2) {-webkit-transition: 0.9s;transition: 0.9s;
}
.boxbook view:nth-of-type(3) {-webkit-transition: 0.8s;transition: 0.8s;
}
.boxbook view:nth-of-type(4) {-webkit-transition: 0.7s;transition: 0.7s;
}
.boxbook view:nth-of-type(5) {-webkit-transition: 0.6s;transition: 0.6s;
}
.boxbook view:nth-of-type(6) {-webkit-transition: 0.5s;transition: 0.5s;
}
/*鼠标悬停时的旋转角度和旋转时间*/
.boxbook:hover view:nth-of-type(1) {-webkit-transform: rotateY(-160deg);transform: rotateY(-160deg);-webkit-transition: 1s;transition: 1s;
}
.boxbook:hover view:nth-of-type(2) {-webkit-transform: rotateY(-150deg);transform: rotateY(-150deg);-webkit-transition: 1.3s;transition: 1.3s;
}
.boxbook:hover view:nth-of-type(3) {-webkit-transform: rotateY(-140deg);transform: rotateY(-140deg);-webkit-transition: 1.5s;transition: 1.5s;
}
.boxbook:hover view:nth-of-type(4) {-webkit-transform: rotateY(-130deg);transform: rotateY(-130deg);-webkit-transition: 1.7s;transition: 1.7s;
}
.boxbook:hover view:nth-of-type(5) {-webkit-transform: rotateY(-1deg);transform: rotateY(-1deg);-webkit-transition: 1.75s;transition: 1.75s;
}
.boxbook:hover view:nth-of-type(6) {-webkit-transform: rotateY(0deg);transform: rotateY(0deg);-webkit-transition: 1.85s;transition: 1.85s;
}

知识点

1.transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。
2.nth-of-type(*)是选择器匹配同类型中的第n个同级兄弟元素-默认从1开始
首先看
3. transition 动画持续时间
4.:hover 鼠标移入-在小程序中表现效果是点击

纯Css翻书效果详解相关推荐

前端学习（284）：纯css实现翻书效果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
自定义控件android特效,Android自定义控件eBook实现翻书效果实例详解
本文实例讲述了Android自定义控件eBook实现翻书效果的方法.分享给大家供大家参考,具体如下: 效果图: Book.java文件: package com.book; import androi ...
如何用css实现左右翻页效果图,如何利用CSS3实现3D翻书效果
这篇文章主要介绍了CSS3实现3D翻书效果,基于CSS3新属性Animation及transform实现类似翻书效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下先上效果图:(样式有点丑,可以忽 ...
书翻页效果php,Css实现翻书效果
如何实现翻书效果在一些小说站中经常应用,其实实现起来也很简单,下面是用div+css 实现翻书效果. body{ overflow: hidden; margin: 0; padding: 0; } ...
使用JQuery的turn.js库来实现翻书效果
一淘模板(56admin.com)本篇文章给大家介绍jQuery的turn.js库,聊聊使用turn.js库实现翻书效果,希望对大家有所帮助! 今天来和大家分享下JQ的turn.js,下面我先来简单介 ...
css样式继承规则详解
css样式继承规则详解一.总结一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
css中float详解,CSS浮动属性Float详解？史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
html5实现3d翻页效果,利用css3 3d transform制作超逼真翻书效果
本教程给大家带来一个非常有创意的翻书效果,使用的是css 3D transforms属性和css transitions属性.这里将给你展示两种不同的图书设计:精装书和平装书.这两种设计只需要简单的改 ...

纯Css翻书效果详解

翻书效果：

代码如下：

小程序html代码：

css代码：

知识点

纯Css翻书效果详解相关推荐

最新文章

热门文章