如何利用纯CSS3创建一个简洁而有效的三角形旋转加载动画？

创建一个三角形旋转加载动画，关键在于利用CSS3的transform和animation属性。首先，定义一个基本的HTML结构，包含一个旋转动画的容器，例如使用一个`.loading`类的`<div>`元素。在这个容器内部，创建三个`<span>`元素，每个代表一个三角形，赋予它们不同的颜色和位置以形成完整的圆形效果。

参考资源链接：[纯CSS3实现炫酷加载动画效果](https://wenku.csdn.net/doc/6t3rasy0fc?spm=1055.2569.3001.10343)

在CSS中，对于`.loading`类，可以设置`position: relative;`和`width: 100px; height: 100px;`来确定加载动画的尺寸，同时使用`margin: auto;`来实现水平和垂直居中。

为每个三角形设置`.loading三角形1`、`.loading三角形2`和`.loading三角形3`类，并通过设置边框技巧来形成三角形。例如，`.loading三角形1`的CSS样式可以是`width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue;`。其他两个三角形可以通过调整`border-left`、`border-right`和`border-bottom`属性值来形成不同的角度和位置。

接下来，使用`@keyframes`创建名为`rotate`的动画，定义了三角形从初始位置旋转到结束位置的过程。例如，`from { transform: rotate(0deg); } to { transform: rotate(360deg); }`。然后将动画应用到每个三角形元素上，使用`animation`属性指定动画名称、持续时间、计时函数、延迟和迭代次数。

最后，为确保动画在旧版浏览器中的兼容性，添加`-webkit-`前缀。通过这些步骤，你可以创建一个简洁而有效的三角形旋转加载动画，无需JavaScript，仅使用纯CSS3实现。更多详细信息和技巧，可以参考《纯CSS3实现炫酷加载动画效果》教程，深入了解CSS3动画的制作和优化。

参考资源链接：[纯CSS3实现炫酷加载动画效果](https://wenku.csdn.net/doc/6t3rasy0fc?spm=1055.2569.3001.10343)