如何制作翻书效果

最新推荐文章于 2024-10-05 23:57:26 发布

朦朦胧胧。

最新推荐文章于 2024-10-05 23:57:26 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签：如何制作翻书效果

本文链接：https://blog.youkuaiyun.com/weixin_44540683/article/details/89974432

本文介绍了如何使用CSS制作翻书效果。通过分析源代码，注意到页面间的重复性和相似性，尤其是`perspective`属性在创建立体感中的作用。关键代码包括`@keyframes`及其变体，用于定义翻页动画。不同页面通过调整旋转角度实现翻页效果，如第二页将-160deg改为-150deg。最后，封面颜色和文字颜色的设定完成了整个效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来源：懒人之家

我相信在Dw中仿制翻页效果是很多人都看过的，但是怎么样方便简洁的制作一个这样的效果呢！
首先先给大家看一下制作完成之后的效果图片

在这里插入图片描述
大家可以看到其实在图片之中其实代码也是有很多重复的加上首页一共就是四页有非常多的相似之处是依照同一个轨道进行翻页的，
首先看一下源代码里面设计

大家也可以看到在源代码这边的部分页数的class 已经全部可以看到。

在这里插入图片描述

其中大家可以看到在 body 里面有一个：perspective 也就是图中用黑色圈画住的地方其中一首是指：属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。
在这个样式的图中不难发现很多其实都是一样的源代码 book-page page-front book-page-box preserve-3d 这几句代码都是相同的在每一页里面都是有的
下面我们来看一下不一样的样式部分
首先是第一个的