CSS3实现类似翻书效果的过渡动画的示例代码

在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实现：

（编辑：衡阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!