做一个盒子跳动的加载动画

最新推荐文章于 2024-05-30 07:30:00 发布

张小益达

最新推荐文章于 2024-05-30 07:30:00 发布

阅读量830

点赞数

分类专栏： HTML与CSS 文章标签： animation css CSS动画

本文链接：https://blog.csdn.net/qq_41033913/article/details/88757097

版权

本文介绍了如何使用CSS创建一个盒子跳动的加载动画。通过CSS3的2D转换，无需JavaScript即可实现动画效果。首先创建四个不同颜色的小盒子，然后为第一个盒子设置动画样式，使其左右滑动并与其他盒子交互。其余盒子根据第一个盒子的位置进行跳动。动画的关键在于利用transform的scale、translate和rotate属性来控制盒子的缩放、位置和旋转，通过调整动画的百分比实现各种动态效果。

摘要由CSDN通过智能技术生成

经常可以在网上看到一些有趣的加载动画，其实并不需要JS控制，只需要CSS去进行调节，需要用到的知识主要是CSS３的２D转换。

首先得生成四个小盒子，可以自己调喜欢的样式

类似于这个样子，为了后面好区分我就加了不同的颜色

其次再看需求是什么，我这里写的是第一个盒子左右滑动，如果遇到了盒子就跳动到滑动盒子的位置，然后不断循环

第一个盒子的animation样式

.scroll{
    animation: leftRight 3s infinite linear;
}
@keyframes leftRight{
    0%{
        transform: translate(0,0);
    }
    50%{
        transform: translate(600px,0);
    }
    100%{
        transform: translate(0,0);
    }
}

简要的意思就是，在动画５０％的时候盒子需要移动到最右边，动画完成的时候回到开始位置

剩余盒子就得依靠第一个盒子过来的位置去控制跳动的时间，可以简单的计算一下接下来动画开始的时间

我以第一个盒子为例简单的说明一下：

可以去想想一下盒子跳动的过程，首先由类似于一种弹簧压缩的过程，我们可以用到transform里面的scale去压缩宽高，然后开始望左边