如何用css如何实现如下效果?

foliage
  • 30

我想实现一个动画效果,比如下图,刚开始的时候圆的边框是#efefef, 经过1s动画后边框为#3498db。

刚开始:
Jietu20191017-124332@2x.jpg

1s后:
Jietu20191017-124317@2x.jpg

我看到用svg可以实现这种效果,而且也可以加上动画。如果用纯css来实现的话,怎么做呢,一点思路没有,请大家帮帮忙,谢谢。

回复
阅读 1.6k
3 个回答

尝试做了一个小Demo
demo

不难写,两个div,外层比内层略大,于是边缘就出来了,中心的勾,可以用伪元素背景旋转。

可能难以想到怎么画进度,这个可以利用外层div的background属性, conic-gradient。

.container {
  --size: 60px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  /* --deg: 90deg; */
  --deg: 30%;
  padding: 5px;
  background: conic-gradient(green 0, green var(--deg), #ddd var(--deg), #ddd 100%)
}

.inner {
  background: #fff;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
}

clipboard.png
只要改变--deg变量的值,就可以画出任意百分比的进度~

宣传栏