【动画消消乐 】一个小清新类型的全局网页过渡动画 075 (2)

右移说明：

下移说明：

左移说明：

上移说明：

主要借助transform属性进行方块的移动

.box>div:nth-child(1) { animation: load1 4s infinite; } @keyframes load1 { from { transform: translate(0); } 25% { transform: translate(100%); } 50% { transform: translate(100%, 100%); } 75% { transform: translate(0, 100%); } }

方块的移动效果如下

注意：translate(x, y)是以最开始的位置作为参考点的

步骤4

其他方块的动画原理也是一样的

不同的就是起始位置不同

编写动画效果的时候注意下需要移动方向的顺序即可（一共就4个移动方向 顺序可以组合）

.box>div:nth-child(1) { animation: load1 4s infinite; } .box>div:nth-child(2) { animation: load2 4s infinite; } .box>div:nth-child(3) { animation: load3 4s infinite; } .box>div:nth-child(4) { animation: load4 4s infinite; } @keyframes load1 { from { transform: translate(0); } 25% { transform: translate(100%); } 50% { transform: translate(100%, 100%); } 75% { transform: translate(0, 100%); } } @keyframes load2 { from { transform: translate(0); } 25% { transform: translate(0, 100%); } 50% { transform: translate(-100%, 100%); } 75% { transform: translate(-100%, 0); } } @keyframes load3 { from { transform: translate(0); } 25% { transform: translate(0, -100%); } 50% { transform: translate(100%, -100%); } 75% { transform: translate(100%); } } @keyframes load4 { from { transform: translate(0); } 25% { transform: translate(-100%, 0); } 50% { transform: translate(-100%, -100%); } 75% { transform: translate(0, -100%); } }

效果图如下

步骤5

注释掉box的背景色

.box { width: 100px; height: 100px; display: flex; flex-wrap: wrap; /* background-color: blue; */ } 步骤6

在全局背景设置中添加动画

使得全局背景颜色随着方块的移动而随着变色

body { animation: backColor 4s infinite; } @keyframes backColor { from { background-color: #5e825a; } 25% { background-color: #82466e; } 50% { background-color: #425e82; } 75% { background-color: #423827; } }

得到最终效果图

结语

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

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

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

写作不易 「点赞」+「收藏」+「转发」

谢谢支持❤️