使用CSS实现简单的翻页效果

2024-04-22 0 704

基本原理

我们先来看一下翻页的过程动图,如下:

使用CSS实现简单的翻页效果

观察动图,大致将此翻页过程分为三个状态,书页未翻开、书页翻动中、书页翻动完成,对应的是“图 翻页过程”。可以看出,翻页过程中,第二页是压在第一页上的,随着旋转角度增加,覆盖面积逐渐增大,翻页完成时,第二页完全覆盖第一页,据此画出两页的状态,如图“图 翻页简析”。

使用CSS实现简单的翻页效果

到此,可以用代码先把项目的树形结构先写出来

<!DOCTYPE html>
<html>
<head>
<meta charset=\”UTF-8\”>
<meta http-equiv=\”X-UA-Compatible\” content=\”IE=edge\”>
<meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\”>
<title>CSS实现翻页效果</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
min-height: 100vh;
}
h1 {
position: absolute;
top: 20px;
left: 0;
width: 100%;
font-size: 36px;
text-align: center;
margin-top: 100px;
}
article {
position: relative;
width: 300px;
height: 400px;
padding: 40px 80px 40px 380px;
background-color: bisque;
margin: auto;
}
.book {
background-color: cornflowerblue;
position: relative;
}
.pageItem {
position: absolute;
width: 300px;
height: 400px;
font-size: 32px;
line-height: 400px;
text-align: center;
background-color: #fda3a3;
}
.front {
background-color: #fac8bf;
z-index: 10;
}
.back {
background-color: #a990d2;
z-index: 10;
}
</style>
</head>
<body>
<h1>CSS实现翻页效果</h1>
<article>
<div class=\”book\”>
<div class=\”pageItem front\”>Page 1</div>
<div class=\”pageItem back\”>Page 2</div>
<div class=\”pageItem\”>Page 3</div>
</div>
</article>
</body>
</html>

代码实现

观察“图 翻页简析”得出page2旋转,page1保持不动,即可基本模拟出翻页效果,运用css的动画效果可以实现page2的连续旋转,而动画的初始状态对应的是“图 翻页简析”的①,结束状态则对应③,接下来需要确定的是旋转中心点以及旋转轴,旋转中心点可以是不断变化的,但为了方便,我们取一固定旋转中心点就好,“图 翻页简析”中三条辅助线的相交点大致在左下方,可以确定旋转中心点的位置范围。以代码图形大小为基准,画出对应的坐标系以及旋转中心点,如“图 旋转示意图”:

使用CSS实现简单的翻页效果

在上图中,旋转中心点为点A,旋转轴为线AB,另外,初始旋转角度即∠DAB的大小,记∠ACD为角c,∠DAB=2∠DAC=2(90-∠ACD)=180-2c,由tanc=AD/CD,求出c≈33.7,可得∠DAB=112.6。

修改代码,为page2添加旋转动画:

.back {
//…
left: -300px;
transform-origin:300px 600px;
transform: rotate(112.6deg);
transition: 1s;
}
article:hover .back{
transform: rotate(0deg);
}

考虑到翻页是折角,相当于page1隐藏折角,而page2只显示这一部分折角,page1和page2显示隐藏的划分是线AC,在线AC左边显示,右边隐藏,翻页过程中,线AC也是在旋转的。要实现部分显示功能,css中的overflow:hidden不就可以。想象一下,一个以线AC为边线的盒子套上page1和page2,使得盒子内的内容显示,盒子外则隐藏,那不就能达到我们想要的效果了吗?当然,此父盒子也是要同步旋转的,但是,由于盒子内的元素也会和盒子旋转相同的角度,那我们原定的旋转角度就会因此发生偏移,如下图①:

使用CSS实现简单的翻页效果

如上图所示,添加父盒子,设定父盒子的旋转中心点同是点A。偏移的角度即上图③中父盒子的旋转角度,该角和角c为内错角,因此该旋转角度为33.7°。page1和page2只要朝反方向旋转相同的角度就能回复原本位置。编写代码时按照上图步骤一步步进行调整,最终添加父盒子后的代码为:

<style>
.rotateBox {
position: absolute;
z-index: 10;
width: 800px;
height: 800px;
bottom: -600px;
transform-origin: 0px 800px;
/* border: 4px dashed #b0b0b0; */
transform: rotate(-33.7deg);
transition: 1s;
overflow: hidden;
}
.front {
//…
//- z-index: 10;
bottom: 200px;
transform-origin: 0 600px;
transform: rotate(33.7deg);
transition: 1s;
}
.back {
//…
//- z-index: 10;
//- transform-origin:300px 600px;
//- transform: rotate(112.6deg);
transform-origin: 300px 600px;
transform: rotate(146.3deg);
bottom: 200px;
}
article:hover .rotateBox {
transform: rotate(-90deg);
}
article:hover .front {
transform: rotate(90deg);
}
article:hover .back {
//- transform: rotate(0deg);
transform: rotate(90deg);
}
</style>

页面美化

最后,为了使效果更为逼真,添加相应的阴影,替换图片进行美化。

最终代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=\”UTF-8\”>
<meta http-equiv=\”X-UA-Compatible\” content=\”IE=edge\”>
<meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\”>
<title>CSS实现翻页效果</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
min-height: 100vh;
}
h1 {
position: absolute;
top: 20px;
left: 0;
width: 100%;
font-size: 36px;
text-align: center;
margin-top: 100px;
}
article {
position: relative;
width: 300px;
height: 400px;
padding: 40px 80px 40px 380px;
margin: auto;
box-shadow: 2px 3px 5px 6px #3f1300;
background-image: url(https://cdn.pixabay.com/photo/2016/12/18/09/05/trees-1915245_1280.jpg);
}
.book {
background-color: cornflowerblue;
position: relative;
}
.rotateBox {
position: absolute;
z-index: 10;
width: 800px;
height: 800px;
bottom: -600px;
transform-origin: 0px 800px;
/* border: 4px dashed #b0b0b0; */
transform: rotate(-33.7deg);
transition: 1s;
overflow: hidden;
}
.pageItem {
position: absolute;
width: 300px;
height: 400px;
font-size: 32px;
text-align: center;
box-shadow: 0 0 11px rgba(0, 0, 0, .5);
}
.front {
bottom: 200px;
transform-origin: 0 600px;
transform: rotate(33.7deg);
transition: 1s;
}
.back {
left: -300px;
transform-origin: 300px 600px;
transform: rotate(146.3deg);
transition: 1s;
bottom: 200px;
}
figure img {
width: 100%;
height: 100%;
aspect-ratio: 3/4;
object-fit: cover;
}
figure figcaption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-wrap: nowrap;
color: #fff;
background-color: rgba(255, 255, 255, .5);
padding: 1em;
border: 4px double #fff;
}
article:hover .rotateBox {
transform: rotate(-90deg);
}
article:hover .front {
transform: rotate(90deg);
}
article:hover .back {
transform: rotate(90deg);
}
</style>
</head>
<body>
<h1>CSS实现翻页效果</h1>
<article>
<div class=\”book\”>
<div class=\”rotateBox\”>
<div class=\”pageItem front\”>
<figure>
<img src=\”https://cdn.pixabay.com/photo/2023/11/22/18/13/beach-8406104_640.jpg\” alt=\”\”>
<figcaption>Page 1</figcaption>
</figure>
</div>
<div class=\”pageItem back\”>
<figure>
<img src=\”https://cdn.pixabay.com/photo/2023/07/07/15/51/sea-8112910_640.jpg\” alt=\”\”>
<figcaption>Page 2</figcaption>
</figure>
</div>
</div>
<div class=\”pageItem\”>
<figure>
<img src=\”https://cdn.pixabay.com/photo/2021/11/26/17/26/dubai-desert-safari-6826298_640.jpg\”
alt=\”\”>
<figcaption>Page 3</figcaption>
</figure>
</div>
</div>
</article>
</body>
</html>

小小改动

想要让页面初始状态有个小小的折角,只要设置初始角度>33.7°,以45°为例,需要修改上述代码如下:

<style>
.rotateBox {
//…
//- transform: rotate(-33.7deg);
transform: rotate(-45deg);
}
.front {
//…
//- transform: rotate(33.7deg);
transform: rotate(45deg);
}
.back {
//…
//- transform: rotate(146.3deg);
transform: rotate(135deg);
}
</style>

以上就是使用CSS实现简单的翻页效果的详细内容,更多关于CSS翻页的资料请关注悠久资源网其它相关文章!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 CSS 使用CSS实现简单的翻页效果 https://www.u-9.cn/sheji/css/188708.html

下一篇:

已经没有下一篇了!

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务