CSS书翻页动画 |css字体靠底部

/* 先定义一个包含两个页面的容器 */
.container{
position: relative;
width: 600px;
height: 400px;
perspective: 1000px; /* 3D透视距离 */
}
/* 页面的样式 */
.page{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}
/* 第一页和第二页的不同样式 */
.page1{
z-index: 1;
transform-origin: right;
transform: rotateY(0deg);
}
.page2{
z-index: 2;
transform-origin: left;
transform: rotateY(-180deg);
}

上述代码中，大家定义了一个包含两个页面的容器，并设置了页面的样式。页面1的z-index值为1，页面2的z-index值为2，这样页面2就会覆盖页面1。同时，大家还定义了页面1和页面2的不同样式，这两个页面的区别在于页面2要翻转180度。

/* 添加动画效果 */
.container:hover .page1{
animation: flip 1s ease-in-out forwards;
}
.container:hover .page2{
animation: flip 1s ease-in-out forwards;
}
/* 定义动画 */
@keyframes flip{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(180deg);
}
}

接着，大家为容器添加hover事件，鼠标悬停在容器上时，就会触发翻转动画效果。同时，大家还定义了一个名为flip的动画，在动画中，大家将页面从0度翻转到180度。

到此为止，大家已经成功实现了CSS翻页动画效果。读者们可以自行通过修改样式和动画效果，来达到不同的呈现效果。