0%

圆点加载效果动画

设计思路:用父盒子包含四个子盒子,父盒子使用相对定位,子盒子使用绝对定位,此时这四个盒子会全部定位在父盒子的左上角,统一对四个子盒子设置关键帧动画,使得子盒子会围绕父盒子四个角依次移动,然后将四个盒子的动画延迟时间(即animaiton-delay属性)设置为总动画时间的0(第一个不用设置),-1/4s, -2/4s, -3/4s,这里设置为负数为了让在显示的时候,其他三个圆提前位于父盒子的其余角位置。