Css3翻书动画特效

一、预览特效

二、全部代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin:0;padding:0;}html,body{width:100%;height:100%;background-color: #4F4E68;}.box{background:black;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}.book {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 18.5rem;height: 12.5rem;perspective: 70rem;}.cover {background-color: #36354e;transform: rotateY(0deg);width: 9.25rem;height: 12.5rem;}.page {top: 0.25rem;left: 0.25rem;background-color: #e9e6c4;transform: rotateY(0deg);width: 9rem;height: 12rem;text-align: right;font-size: 8px;color: #777;font-family: monospace;}.page::before, .page::after {display: block;border-top: 1px dashed rgba(0, 0, 0, 0.3);content: "";padding-bottom: 1rem;}.cover, .page {position: absolute;padding: 1rem;transform-origin: 100% 0;border-radius: 5px 0 0 5px;box-shadow: inset 3px 0px 20px rgba(0, 0, 0, 0.2),0px 0px 15px rgba(0, 0, 0, 0.1);box-sizing: border-box;}.cover.turn {animation: bookCover 3s forwards;}.page.turn {animation: bookOpen 3s forwards;}.page:nth-of-type(1) {animation-delay: 0.05s;}.page:nth-of-type(2) {animation-delay: 0.33s}.page:nth-of-type(3) {animation-delay: 0.66s;}.page:nth-of-type(4) {animation: bookOpen150deg 3s forwards;animation-delay: 0.99s;}.page:nth-of-type(5) {animation: bookOpen30deg 3s forwards;animation-delay: 1.2s;}.page:nth-of-type(6) {animation: bookOpen55deg 3s forwards;animation-delay: 1.25s;}@keyframes bookOpen {30% { z-index: 999 }100% {  transform: rotateY(180deg);z-index: 999;}}@keyframes bookCover {30% { z-index: 999 }100% {  transform: rotateY(180deg);z-index: 1;}}@keyframes bookOpen150deg {30% { z-index: 999 }100% {  transform: rotateY(150deg);z-index: 999;}}@keyframes bookOpen55deg {30% { z-index: 999 }100% {  transform: rotateY(55deg);z-index: 999;}}@keyframes bookOpen30deg {50% { z-index: 999 }100% {  transform: rotateY(30deg);z-index: 999;}}</style></head><body><div class="box"><div class="book"><span class="page turn"></span><span class="page turn"></span><span class="page turn"></span><span class="page turn"></span><span class="page turn"></span><span class="page turn"></span><span class="cover"></span><span class="page"></span><span class="cover turn"></span></div></div></body>
</html>

Css3翻书动画特效相关推荐

HTML5+CSS3小实例：翻书动画
实例:翻书动画技术栈:HTML+CSS 效果: 源码: <!DOCTYPE html> <html><head><meta http-equiv=" ...
使用OpenGL实现翻书动画
2019独角兽企业重金招聘Python工程师标准>>> 上一篇文章介绍了如何通过纹理渲染绘制地球仪,当然OpenGL的三维图形处理能力是很强大的,只要善于利用OpenGL,就能很方便 ...
9款超绚丽的HTML5/CSS3应用和动画特效
HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验.今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单.按钮.图片 ...
纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
html5 banner特效,HTML5特效库 CSS3遮罩banner动画特效源码
效果图各位朋友.大家早上好! 今天给大家带来的是 CSS3遮罩banner动画特效源码! 看倦的轮播图的,可以试试这个特效!别有一番意思! 大家可以按照自己的意愿进行行修改,改成自己喜欢的样子! 有 ...
Android开发笔记（一百五十七）使用OpenGL实现翻书动画
上一篇文章介绍了如何通过纹理渲染绘制地球仪,当然OpenGL的三维图形处理能力是很强大的,只要善于利用OpenGL,就能很方便地虚拟各种现实生活中的动画效果.本文再来谈谈使用OpenGL实现浏览电子书 ...
css3特效框,科技常识：6种非常炫酷的CSS3按钮边框动画特效
今天小编跟大家讲解下有关6种非常炫酷的CSS3按钮边框动画特效 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关6种非常炫酷的CSS3按钮边框动画特效的相关资料,希望小伙伴们看了有所帮助. ...
uni-app h5、app模式下集成turn.js 翻书动画
uni-app 集成turnjs 翻书动画 h5 页面引入JQuery.turn.js 工具类文件,注意引入的顺序 import '@/utils/jquery.min.1.7.js'; impor ...
Android App开发手机阅读中实现平滑翻书效果和卷曲翻书动画实战（附源码简单易懂可直接使用）
需要图片集和源码请点赞关注收藏后评论区留言~~~ 一.平滑翻书效果与纸质书籍类似,手机上的电子书也有很多页,逐页浏览可采用翻页视图,然而翻页视图犹如一幅从左到右的绵长画卷,与现实生活中上下层叠的书籍 ...

Css3翻书动画特效

一、预览特效

二、全部代码

Css3翻书动画特效相关推荐

最新文章

热门文章