欢迎光临

木子屋

标题: 基于CSS3属性Animation和transform实现类似翻书效果[转]

作者: dnawo

日期: 2022-07-18 09:36 AM

分类: HTML/CSS

内容:
复制内容到剪贴板 程序代码<!doctype html>
<head>
<meta charset="utf-8">
<title>基于CSS3属性Animation及transform实现类似翻书效果</title>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
.book{
width: 460px;
height: 300px;
position: relative;
margin: 150px 400px;
transform: rotatex(15deg);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}
.page{
width: 230px;
height: 300px;
border: 1px solid #666;
position: absolute;
right: 0;
transform-origin: left;
transform-style: preserve-3d;
backface-visibility:hidden;
font-size: 60px;
text-align: center;
line-height: 300px;
}
.page span{
display: block;
width: 100%;
position: absolute;
background-color: #00FFFF;
}
.page span:nth-child(2){
transform: rotatey(-180deg);
backface-visibility:hidden;
}
/*翻上一页动画*/
@keyframes prev {
0%{
transform: rotatey(-180deg);
z-index: 10;
}
100%{
transform: rotatey(0deg);
}
}
/*翻下一页动画*/
@keyframes next {
0%{
transform: rotatey(0deg);
}
100%{
transform: rotatey(-180deg);
z-index: 10;
}
}
</style>
</head>
<body>
<!-- 所展示的书的内容 -->
<div class="book">
<div class="page">
<span>1</span>
<span>2</span>
</div>
<div class="page">
<span>3</span>
<span>4</span>
</div>
<div class="page">
<span>5</span>
<span>6</span>
</div>
<div class="page">
<span>7</span>
<span>8</span>
</div>
<div class="page">
<span>9</span>
<span>10</span>
</div>
</div>
<!-- 用来控制上一页和下一页操作 -->
<input type="button" value="上一页" id="prev"/>
<input type="button" value="下一页" id="next"/>
<script>
.ready(function(){
let pageno = 0;
let pagecount = $(".page").length;
//设置每一页z-index
let i=0;
$(".page").each(function(){
i++;
.css("z-index", pagecount-i);
})
//翻上一页
$("#prev").click(function(){
if(pageno > 0){
pageno--;
$(".page:eq("+pageno+")").css("animation", "prev 1.5s linear 1 forwards");
}else{
pageno = 0;
}
})
//翻下一页
$("#next").click(function(){
if(pageno < pagecount){
$(".page:eq("+pageno+")").css("animation", "next 1.5s linear 1 forwards");
pageno++;
}else{
pageno = pagecount;
}
})
});
</script>
</body>
</html>
原文链接：https://www.cnblogs.com/LUOQIANangel/p/5598512.html

+ 查看当前日志评论 (0)

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 1.273 ms

返回

标题: 基于CSS3属性Animation和transform实现类似翻书效果[转]

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 1.273 ms

返回

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 1.305 ms

返回