CSS3、jQuery实现3D翻书动画
使用CSS3 ,jQuery实现点击翻书动画效果,完整效果可在firefox中查看
HTML
<div class="desktop">
<div class="book">
<div class="page bg end">
<div class="front">谢谢阅读</div>
</div>
<div class="page">
<div class="back">
<p>JavaScript很重要</p>
</div>
<div class="front">JavaScript </div>
</div>
<div class="page">
<div class="back">
<p>CSS3非常强大</p>
</div>
<div class="front">CSS3</div>
</div>
<div class="page">
<div class="back">
<p>HTML5新特性不错哦</p>
</div>
<div class="front">HTML5</div>
</div>
<div class="page bg">
<div class="back">
<p>作者:M先生</p>
<p>个人博客:</p>
<a href="https://home.cnblogs.com/u/mp1994/">https://home.cnblogs.com/u/mp1994/</a>
</div>
<div class="front">前端技术栈</div>
</div>
</div>
</div>
CSS
/* 简单翻书动画开始 */
.desktop{
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.book{
width: 300px;
height: 400px;
position: absolute;
/* 倾斜30度角 */
transform: rotateX(30deg);
transform-style: preserve-3d;
perspective:;
font-size: 30px;
color: #9ACD32;
box-shadow: 0 6px 10px 0 rgba(0,0,0,.6);
}
.page{
width: 100%;
height: 100%;
position: absolute;
background-color: #eee; /* 翻转轴left */
transform-origin: left;
/* backface-visibility: hidden; */
border-left: 2px solid saddlebrown;
box-sizing: border-box;
z-index: ;
}
.bg{
background-color: #1D7DB1;
}
.end{
z-index: -999999;
}
/* 正面 */
.front{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: inherit;
}
/* 背面 */
.back{
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: inherit;
color: red;
font-size: 12px;
font-weight: bold;
transform: rotateY(180deg);
}
@keyframes turning {
to{
transform: rotateY(-160deg);
}
}
@keyframes resetBook{
from{
transform: rotateY(-160deg);
}
to{
transform: rotateY(0deg);
}
} /* 简单翻书动画结束 */
JavaScript
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function () {
const $page = $('.page')
let isClick = true
$page.click(function (e){
// 动画执行时禁止再次点击
if (isClick) {
isClick = false
setTimeout( () => {
isClick = true
}, 2000) // 获取当前点击元素下标
const index = $(this).index()
const $childFront = $(this).children('.front')
const $childBack = $(this).children('.back') // 由于背部封面(下标0)是不动的 因此判断下标大于0才增减class
if (index > 0) {
// 判断是否已经翻过 已经翻过则翻回
if ( $(this).hasClass('flag') ) {
// 设置css执行动画效果
$(this).css({
"animation": "resetBook 2s linear 1"
})
// 转到一半时 设置正反面 z-index
setTimeout(() => {
$(this).css({
"z-index": index
})
$childFront.css({'z-index': index})
$childBack.css({'z-index': index - 1})
}, 1000) // 去除标记
$(this).removeClass('flag') } else {
// 设置css执行动画效果
$(this).css({
"animation": "turning 2s linear 1",
"animation-fill-mode": "forwards",
}) // 动画完成后将设置翻转后的z-index
// 兼容chrome浏览器
const isChrome = navigator.userAgent.indexOf('Chrome')
if (isChrome > -1) {
setTimeout(() => {
$(this).css({
'z-index': index,
"box-shadow": "0 6px 10px rgba(0,0,0,.2)"
})
},2000)
} else {
setTimeout(() => {
$(this).css({
'z-index': index * -1,
"box-shadow": "0 6px 10px rgba(0,0,0,.2)"
})
},2000)
}
// 转到一半时 设置正反面 z-index
setTimeout(() => {
$childFront.css({'z-index': index})
$childBack.css({'z-index': index + 1})
}, 1000) // 添加标记
$(this).addClass('flag')
}
}
}
})
})
</script>
效果如下:
CSS3、jQuery实现3D翻书动画的更多相关文章
- 【原创】jQuery插件 - Booklet翻书特效教程(一) 一般设置
jQuery插件 - Booklet翻书特效教程(一) 一般设置 本文由五月雨恋提供,转载请注明出处. 一.宽高(width/height) 1.自定义大小 $(function(){ // 自定义页 ...
- 使用 CSS3 & jQuery 制作漂亮的书签动画
今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...
- jQuery+turn.js翻书、文档和杂志3种特效演示
很好用的一款插件jQuery+turn.js翻书.文档和杂志3种特效演示 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- 一款纯css3实现的机器人看书动画效果
今天要给大家介绍一款纯css3实现的机器人看书动画效果.整个画面完全由css3实现的绘制,没有使用任何图片元素.机器人的眼睛使用了动画元素.我们一起看下效果图: 在线预览 源码下载 实现的代码. ...
- PPT中翻书动画的制作
一.新建一个空白的PowerPoint文档. 二.制作两个页面: 1.点击“自选图形”右边的小三角,选择“基本图形”下的“折角形”图形,在PowerPoint中画出一个书页样的图形,宽度最好小 ...
- HTML5 3D翻书效果(双面效应)
最后使用HTML5翻书效果达到测试,比较简单,它的升级版是 最后一个问题: 1)后,原来的页面连环画将成为一面镜子 2)无法实现双面翻书. 3)明显感觉页面似有近遮挡标志. 这次的升级版本号实现过程比 ...
- jquery css3问卷答题卡翻页动画效果
这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...
- [原创]纯CSS3打造的3D翻页翻转特效
刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...
- css3+jquery制作3d旋转相册
首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...
随机推荐
- 自定义JDBC工具类
因为数据库的连接代码都是固定的,为了将减少重复的代码的书写,可以将这些代码封装为一个工具类,获取数据库的连接对象. import java.sql.Connection; import java.sq ...
- Java 中 Set、List 和 Map 的遍历
java集合类的使用可以说是无处不在,总的我们可以将之分为三大块,分别是从Collection接口延伸出的List.Set和以键值对形式作存储的Map类型集合. package tup.lucene. ...
- SpringBoot的一个小彩蛋
彩蛋这种东西还算比较常见,在电影或者游戏里面我们也遇见过不少.今天就简单介绍一下SpringBoot里面的一个小彩蛋. 玩过SpringBoot的同志都知道,SpringBoot的启动界面是这酱紫的: ...
- python 切片步长
python切片 切片:list变量[值下标:结束值下标] 什么意思呢? 就是获取 list中 下标从定义的位置开始获取数据到 自定义的下标位置结束, 但是切片有个规矩就是顾头不顾尾, 举个例子 ...
- JS中数据类型转换
JS中数据类型转换汇总 JS中的数据类型分为 [基本数据类型] 数字 number 字符串 string 布尔 boolean 空 null 未定义 undefined [引用数据类型] 对象 obj ...
- 学习WEBAPI第一天
目录 WebApi: 通过操作对象来实现操作标签的目的 一.DOM 中常用的操作 二.doucument对象 三.获取元素 四.注册事件 五.操作元素的属性 六.当页面加载完时,script代码已经执 ...
- centos7 远程连接其他服务器mysql
在本地远程连接 在终端输入: mysql -h 服务器ip地址 -P 端口 -u 用户名 -p 然后输入密码即可.
- playframe 项目搭建
- 在window里面安装ubuntu子系统并安装图形化界面
一.开启windows子系统 1. 在win10设置里面开启开发人员选项 (设置-->更新安全--> 开发者选项 )选择开启 2.在控制面板里面开启windows子系统 (启用或关闭wi ...
- 教老婆学Linux运维(二)Linux常用命令指南【下】
目录 tips:紧接上一篇,Linux常用命令指南[上] 2.4 文件解压缩 2.4.1 官宣的linux压缩工具:tar tar的基本命令格式为 tar [参数选项] [文件或目录] 我们前面学的命 ...