html 环形 svg 类似于dashed边框
时间: 2023-07-20 11:14:19 浏览: 73
要实现类似于 `dashed` 边框的环形效果,可以使用 SVG 的 `stroke-dasharray` 和 `stroke-dashoffset` 属性,配合 CSS 的动画效果来创建。
以下是一个示例代码:
```html
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="#ccc" fill="none" stroke-width="10"
stroke-dasharray="251.2" stroke-dashoffset="251.2" class="circle" />
</svg>
```
```css
.circle {
stroke-dasharray: 251.2;
stroke-dashoffset: 251.2;
animation: dash 2s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
```
解释一下代码:
- `<circle>` 标签用于创建一个圆,其中 `cx` 和 `cy` 属性指定圆心坐标,`r` 属性指定半径,`stroke` 属性指定边框颜色,`fill` 属性指定填充颜色,这里为透明色,`stroke-width` 属性指定边框宽度。
- `stroke-dasharray` 属性指定边框线的长度和间隔,这里设置为 `251.2`(即圆的周长),表示边框线长度为圆的周长,间隔为 0。
- `stroke-dashoffset` 属性指定边框线的起始偏移量,这里设置为 `251.2`,表示边框线从圆的最上方开始画。
- `class` 属性用于给圆添加一个 `circle` 类名,用于 CSS 选择器。
- CSS 中,使用 `animation` 属性来定义动画效果,其中 `dash` 是动画名称,`2s` 是动画时长,`linear` 是动画速度曲线,`forwards` 表示动画结束后保持最后一帧的状态。
- `@keyframes` 规则用于定义动画的具体过程,这里从 `to` 开始,表示动画从开始到结束,`stroke-dashoffset` 属性从 `251.2` 减少到 0,即边框线从圆的最上方逆时针绘制到完整的圆形。
你可以根据需要调整圆的大小、颜色、宽度、动画时长等属性,从而得到不同的环形效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)