目前发现svg实现一些动画效果是比较高效简单的。
如圆形进度条，只要会stroke-dasharray与stroke-dashoffset属性基本就可以实现，而且美观。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.svg{
transform: rotate(-90deg);
}
.t1{
stroke-dashoffset:0px;
animation: donut-show-one linear 5s forwards;
}
@keyframes donut-show-one {
from{
stroke-dashoffset: 0px;
}
to {
stroke-dashoffset: -565px;
}
}
</style>
</head>
<body>
<svg width="300px" height="300px" class="svg">
<circle id="donut-graph" class="t2" r="90" cy="150" cx="150" stroke-width="4" stroke="#000" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
<circle id="donut-graph" class="t1" r="90" cy="150" cx="150" stroke-width="4" stroke="#666" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dasharray="565" />
</svg>
</body>
</html>
stroke-dasharray是实线长度与实线之间距离的设置值，当一个为一个值是就是同等值，就是实线与间隙同等长。
stroke-dashoffset这是偏移值。
这两个值如果一起使用在stroke-dasharray为圆的周长时而stroke-dashoffset动态设置值，那么就会出现圆的进度条的效果。
原文地址：https://www.cnblogs.com/zhangzhicheng/p/9096785.html
时间： 2024-08-29 16:10:46