CSS教学_跳跃小球加载动画

点击蓝字 关注我们

各位同学好呀！

今天我们教大家制作有趣的

跳跃小球加载动画

快来学习吧！

01

       1.首先制作html，设定盒子，利用span设置五个小球及其阴影，设置--i为小球的自定义属性，方便css通过var函数对其调用。

02

       2.先设置好整体的基本样式。设置窗口高度，用flex弹性布局，使后续画面水平+垂直居中。

03

        3.设置盒子的基本样式。相对定位，让后续小球及其阴影作为参考点。

04

        4.接下来设置小球的尺寸以及颜色，相对定位，通过var函数调用自定义属性--i，计算出每个小球的位置，设定执行动画：动画名、时长、线性的、无限次播放，利用变量让小球的运动拉开时间。

05

         5.同理设置小球的阴影。

效果如下：

06

        6.给小球定义动画过程中的变化，在这其中可以加个颜色滤镜，改变小球的颜色，可以通过设置不同的度数来改变颜色。

07

       7.给小球阴影定义变化，让阴影有个来回缩放的变化，在这期间可以通过filter：blur()给阴影加个模糊滤镜，通过数值的调试，设置成自己想要的效果。

08

        8.以下是完整代码。

最终效果

本期的教学就到此结束啦

我们下期见！

图文 | 李   睿 

排版 | 陈均如

ITeam数媒部