svg制作loading动画：
刚开始接触svg，基础知识看了一点，觉得还是得上手练：
在网上找了个🌰看着挺好看的，就跟着实现了一下，顺便巩固一下基础知识：
效果看起来还是很炫酷的，好了，废话不多说，开搞咯：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<svg viewBox="-50 -50 100 100" width="200">
<!-- defs标签定义需要重复使用的图形元素-->
<defs>
<!-- g标签用来组合对象容器 -->
<g id="spinner">
<!-- circle标签定义一个圆，fill为填充颜色，cx,cy,r分别为圆心的x，y坐标和圆的半径 -->
<circle r="9" fill="#c6c09c" cx="40" cy="0"></circle>
<circle r="9" fill="#ffc98b" cx="0" cy="40"></circle>
<circle r="9" fill="#ffb284" cx="-40" cy="0"></circle>
<circle r="9" fill="#e79796" cx="0" cy="-40"></circle>
</g>
</defs>
<!-- 解析一些效果图：分为4个方向，每个方向4个逐渐缩小的圆。然后加上旋转动画即可 -->
<g class="single" opacity="1">
<use href="#spinner"></use>
<g class="single" opacity="0.8">
<use href="#spinner"></use>
<g class="single" opacity="0.8">
<use href="#spinner"></use>
<g class="single" opacity="0.8">
<use href="#spinner"></use>
</g>
</g>
</g>
</g>
</svg>
</body>
<style>
body{
display: grid;
place-content: center;
background: #222;
height: 100vh;
margin: 0;
}
.single{
// 调整缩放至合适的大小
transform: scale(0.6) rotate(0);
// 添加旋转动画
animation: spin 2s ease-in-out infinite;
}
@keyframes spin {
to {
transform: scale(0.6) rotate(1turn);
}
}
</style>
</html>
经过👆的🌰，复习了defs、g、circle、use等svg标签，以及animation、transform等css属性
