uniapp纯CSS3渐变线条脉冲动画效果

/* 定义一个圆形进度条容器 */
.progress-ring {
  width: 100px;
  height: 100px;
  position: relative;
}
 
/* 定义圆形轮廓，并设置渐变背景 */
.progress-ring::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  background: conic-gradient(
    #3498db 0%,
    #3498db 50%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: auto 100%;
  background-repeat: no-repeat;
  transition: background-position 2s infinite; /* 设置背景位置的过渡动画，实现动态效果 */
}
 
/* 触发动画 */
.progress-ring:hover::after {
  background-position: 0 100%; /* 动画触发点，从上到下 */
}

这段代码定义了一个圆形容器，并在其伪元素中使用渐变背景创建了一个线条。通过改变伪元素的背景位置，我们可以触发一个从上到下的动画过渡效果，模拟出脉冲动画。这个例子展示了CSS3的 conic-gradient 和 background-position 的用法，以及如何通过伪类触发动画。