CSS 四个不同大小和颜色的圆环加载动画 #前端开发工程师

今天给大家带来是四种颜色的加载动画效果。大家可以仔细看到这是四个小点，点进行圆形的环绕，三百六十度的。看一下代码区域，我用开发工具是hplx开发unif的。

·首先看一下威武士图容器，里面包含svg图形元素，里面又包含了四个圆形，圆形a、圆形b、圆形c、圆形d等。大家可以看我这注释就应该看得明白，我很写的很详细。看效果去就知道一共是四个圆，大家可以发现没有，每个点都有自己运动的轨迹。

·下面看一下csspro，首先是背景和整体的效果。下面就是缩小svg元素，已经就把它给缩小了，原本是一个圆，进行六六的。大家可以看一下，在停收小圆，看起来是个小圆。

·进行所有圆环动画的类名任a，大家可以看到a圆的关键帧过渡的效果，零六百六，负百分之四十到百分之九十等。这个是第一个，a点也是个圆形的动画。

·设置了a的颜色，红色在跳，下面就是b的颜色、c的颜色、d的颜色。

前面给大家讲了a的动画的关键帧，大家看到这是b的几乎就是相同的，只是大小和旋转的轨迹是不一样的。其实很简单的，四个圆形分别设置成不同的颜色，每个有一个独立的运动轨迹就可以完成了。

喜欢的可以点赞收藏一下，也可以自己动手去写。如果想要原代码的可以找我唠嗑进行获取。今天的css样式就讲到这了。