【动画消消乐】HTML+CSS 自定义加载动画：清新折叠方块效果 063（附源码及原理详解） (4)

设置动画从第一帧过渡至第五帧

animation: loading_2 2s ease infinite; @keyframes loading_2 { 0% { transform: translate(0, 0) rotateX(0) rotateY(0) } 25% { transform: translate(100%, 0) rotateX(0) rotateY(180deg) } 50% { transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg) } 75% { transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg) } 100% { transform: translate(0, 0) rotateX(0) rotateY(360deg) } }

将此动画定义为动画2

效果图如下

步骤8

动画1为：

动画2为：

将动画1与动画2叠加

效果图如下

步骤9

将span旋转45度

span { transform: rotate(45deg); }

效果图如下：

步骤10

取消span背景色

得到最终效果

结语

文章仅作为学习笔记，记录从0到1的一个过程

希望对您有所帮助，如有错误欢迎小伙伴指正～

我是海轰ଘ(੭ˊᵕˋ)੭，如果您觉得写得可以的话，请点个赞吧

谢谢支持❤️