<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container {
border: 1px solid rgb(15, 15, 15);
width: 200px;
height: 200px;
}
</style>
<body>
<!-- svg动画 -->
<!--
transform变换
translate位移
rotate旋转
skewX和skewY斜切
scale缩放
matrix复杂变形
-->
<div class="container">
<svg width="200" height="200" viewBox="0 0 200 200">
<!-- xy各偏移 -->
<!-- 旋转 顺时针-->
<rect x="0" y="0" width="100" height="50" fill="red" transform="translate(10, 10) rotate(30)"></rect>
</svg>
</div>
<!-- 环形进度条-->
<div class="container">
<svg width="200" height="200">
<circle cx="100" cy="100" r="90" stroke-width="10" stroke="#d1d3d7" fill="none"></circle>
<circle class="circle" cx="100" cy="100" r="90" stroke-width="10" stroke="#00a5e0" fill="none"></circle>
</svg>
</div>
</body>
<style>
.circle {
/* 周长 = 2 * 3.1415926 * r 100 */
/* stroke-dasharray: 105 615; */
animation: circle 5s linear infinite;
}
/* 补间动画：开始和结束状态 */
@keyframes circle {
from {
stroke-dasharray: 0 615;
}
to {
stroke-dasharray: 615 615;
}
}
</style>
</html>
