CSS3实现类似翻书效果的过渡动画的示例代码
副标题[/!--empirenews.page--]
在VUE实战项目的中有一个加载推荐书籍的过渡动画,在项目中是使用JS实现。 当时看视频大概一个小时作用,拆分动画逻辑,写代码更是耗时。后来自己想着能不能用CSS动画直接写出来,折腾了半天,终于算是实现了。 /*首先是DOM结构,不能像js一样分左右两边,正面翻为反面还要改变z-index,按照同样的布局也尝试过,没有用CSS动画写出来,逻辑太复杂。 这是一个类似翻书一样的动画效果,想着结构分为一页一页,一页旋转180°,完成时再改变“这一页”的z-index。每个page类的before伪类为正面,after伪类为反面;分解5页的在每一秒的动画,写出各自的animation。 */ <div class="card"> <div class="page"></div> <div class="page"></div> <div class="page"></div> <div class="page"></div> <div class="page"></div> </div> .card{ width: 50px; height: 50px; opacity: 0; position: relative; animation: .5s all; } .card .page{ width: 50%; height: 100%; position: absolute; left: 50%; top: 0; transform-style: preserve-3d; transform-origin: left; } .card .page::before, .card .page::after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 0px 50px 50px 0px; } .card .page::after{ border-radius: 50px 0px 0px 50px; } .card .page:nth-child(1){ animation: animation1 2s linear infinite; } .card .page:nth-child(2){ animation: animation2 2s linear infinite; } .card .page:nth-child(3){ animation: animation3 2s linear infinite; } .card .page:nth-child(4){ animation: animation4 2s linear infinite; } .card .page:nth-child(5){ animation: animation5 2s linear infinite; } .card .page:nth-child(1)::before{ background: aqua url("./images/star-right.png") center left/50% 50% no-repeat; } .card .page:nth-child(1)::after{ background: hotpink url("./images/compass-left.png") center right/50% 50% no-repeat; transform: rotateY(180deg); } .card .page:nth-child(2)::before{ background: hotpink url("./images/compass-right.png") center left/50% 50% no-repeat; } .card .page:nth-child(2)::after{ background: coral url("./images/crown-left.png") center right/50% 50% no-repeat; transform: rotateY(180deg); } .card .page:nth-child(3)::before{ background: coral url("./images/crown-right.png") center left/50% 50% no-repeat; } .card .page:nth-child(3)::after{ background: cyan url("./images/gift-left.png") center right/50% 50% no-repeat; transform: rotateY(180deg); } .card .page:nth-child(4)::before{ background: cyan url("./images/gift-right.png") center left/50% 50% no-repeat; } .card .page:nth-child(4)::after{ background: yellowgreen url("./images/heart-left.png") center right/50% 50% no-repeat; transform: rotateY(180deg); } .card .page:nth-child(5)::before{ background: yellowgreen url("./images/heart-right.png") center left/50% 50% no-repeat; } .card .page:nth-child(5)::after{ background: aqua url("./images/star-left.png") center right/50% 50% no-repeat; transform: rotateY(180deg); } @keyframes animation1 { 0%{ z-index: 1; transform: rotateY(180deg); } 20%{ z-index: 1; transform: rotateY(180deg); } 40%{ z-index: 3; transform: rotateY(360deg); } 60%{ z-index: 4; transform: rotateY(360deg); } 60.0001%{ z-index: 4; transform: rotateY(0deg); } 80%{ z-index: 5; transform: rotateY(0deg); } 100%{ z-index: 4; transform: rotateY(180deg); } } @keyframes animation2 { 0%{ z-index: 5; transform: rotateY(0deg); } 20%{ z-index: 4; transform: rotateY(180deg); } 40%{ z-index: 1; transform: rotateY(180deg); } 60%{ z-index: 3; transform: rotateY(360deg); } 80%{ z-index: 4; transform: rotateY(360deg); } 100%{ z-index: 5; transform: rotateY(360deg); } } @keyframes animation3 { 0%{ z-index: 4; transform: rotateY(0deg); } 20%{ z-index: 5; transform: rotateY(0deg); } 40%{ z-index: 4; transform: rotateY(180deg); } 60%{ z-index: 1; transform: rotateY(180deg); } 80%{ z-index: 3; transform: rotateY(360deg); } 100%{ z-index: 4; transform: rotateY(360deg); } } @keyframes animation4 { 0%{ z-index: 3; transform: rotateY(0deg); } 20%{ z-index: 4; transform: rotateY(0deg); } 40%{ z-index: 5; transform: rotateY(0deg); } 60%{ z-index: 4; transform: rotateY(180deg); } 80%{ z-index: 1; transform: rotateY(180deg); } 100%{ z-index: 3; transform: rotateY(360deg); } } @keyframes animation5 { 0%{ z-index: 2; transform: rotateY(0deg); } 20%{ z-index: 3; transform: rotateY(0deg); } 40%{ z-index: 4; transform: rotateY(0deg); } 60%{ z-index: 5; transform: rotateY(0deg); } 80%{ z-index: 4; transform: rotateY(180deg); } 100%{ z-index: 1; transform: rotateY(180deg); } } 再贴出JS实现: (编辑:温州站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- Windows 10的三个隐藏功能 好用,却很少人了解
- 清华大学集成电路学院创设,加快培养高层次IC人才
- 自己动手在Windows10和Windows11的WSL中安装Ubuntu 21.10
- MongoDB数据库操作有哪些?一文带你迅速了解
- 从Powershell脚本中引用的DLL对App.Config连接字符串进行亚
- Windows 11 2022新版22538上线 焕然一新任务管理器来了
- 功能说明 通过script来处理文本文件
- window 10 npm install node-sass报错
- IDC:2017Q4全球服务器市场供应商收入达207亿美元 销量同比
- 高密度主机托管和企业数据中心的冷却系统考虑因素