HTML5CSS3 3D
html5 和 css3 的 3D 动画图书翻页效果,做得挺有意思。翻页的那种立体感不靠图片,全靠CSS3 的 3D 变换和HTML5 的结构标签撑起来,交互顺滑、细节也到位。
页面用到的关键是transform和perspective,再加上一点@keyframes动画配合JavaScript来点击翻页,视觉上有点像真的翻书一样。操作也简单,点一下就翻一页,响应也快。
内容方面可以通过JSON配置动态加载每一页内容,图文混排都没问题。如果你做电子杂志、在线教材或者产品画册的交互展示,这个资源还挺合适。想扩展下功能,比如加个音效、封面封底动画什么的,也留了口子。
对动画效果感兴趣的你,还可以看看纯 CSS3 翻书效果、3D 旋转动画、或者Canvas 烟花那几个项目,风格不一样,但都能学点小技巧。
文件名是texiao8118_1560680934
,估计是打包好的源码,建议放到本地跑一下,看效果最直观。如果你打算集成到自己的项目里,记得整理一下 DOM 结构和样式前缀,避免冲突。
下载地址
用户评论