css如何实现水柱加载效果

这篇文章主要介绍了css如何实现水柱加载效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

水柱加载

.progress-9 {      --r1: 154%;  --r2: 68.5%;  width:60px;  height:60px;  border-radius: 50%;   background:    radial-gradient(var(--r1) var(--r2) at top ,#0000 79.5%,#269af2 80%) center left,    radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%,#0000 80%) center center,    radial-gradient(var(--r1) var(--r2) at top ,#0000 79.5%,#269af2 80%) center right,    #ccc;  background-size: 50.5% 220%;  background-position: -100% 0%,0% 0%,100% 0%;  background-repeat:no-repeat;  animation:p9 2s infinite linear;}@keyframes p9 {    33%  {background-position:    0% 33% ,100% 33% ,200% 33% }    66%  {background-position: -100%  66%,0%   66% ,100% 66% }    100% {background-position:    0% 100%,100% 100%,200% 100%}}

radial-gradient 画出水平面的波动，就三个圆。var(--r1) 直接调用定义好的属性值。技能 get ...

感谢你能够认真阅读完这篇文章，希望小编分享的"css如何实现水柱加载效果"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!