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数媒部

版权声明:admin 发表于 2022-04-20 15:58:08。
转载请注明:CSS教学_跳跃小球加载动画 | 甄选网