是一个纯CSS实现的Loading特效，它由5个圆形组成，每个圆形在不同的时间点开始旋转，并在不同的速度上旋转，创造出一个动态而又和谐的效果。该特效通过使用CSS3动画和渐变属性实现，代码简洁，易于理解和修改。该特效可用于各种网站和应用程序中，为用户提供更好的等待体验。

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

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

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

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

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

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

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

是Web开发和CSS的新手吗？你是否想过如何在互联网上看到那些漂亮的形状？别再奇怪了。你来对地方了。

下面，我将解释使用CSS创建形状的基本知识。还有很多要告诉你关于这个话题！因此，我不会涵盖所有（绝大部分）工具和形状，但这应该使你基本了解如何使用CSS创建形状，并且创建文字环绕图形的方式方法。

有些形状比其他形状需要更多的“技巧和窍门”。使用CSS创建形状通常是使用宽度，高度，顶部，右侧，左侧，边框，底部，变换和伪元素（例如：before和：after）的组合。我们还具有更现代的CSS属性，可使用诸如shape-outside和clip-path之类的形状来创建形状，这些内容我将在后面写出来。