&::before{content:"";position: absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;background:conic-gradient(transparent, transparentvar(--per),#fa7var(--per),#fa7);mask:radial-gradient(transparent, transparent47.5px,#00048px,#000);animation: change3sinfinitecubic-bezier(0.57,0.29,0...
完整的代码你可以戳这里:CodePen Demo -- Linear loading OK,还会有同学说了,我不想引入 SVG 标签,我只想使用纯CSS 方案。这里,还有一种利用 CSS @property 的纯 CSS 方案。 方法三:使用 CSS @property 让 conic-gradient 动起来 这里我们需要借助 CSS @property 的能力,使得本来无法实现动画效果的角向渐变,...
将会得到这样一种效果,由于conic-gradient是不支持过渡动画的,得到的是一帧向另外一帧的直接变化: 好,使用 CSS @property 自定义变量改造一下: 代码语言:javascript 复制 @property--per{syntax:'<percentage>';inherits:false;initial-value:25%;}div{background:conic-gradient(yellowgreen,yellowgreenvar(--per)...
-webkit-mask:linear-gradient(0deg,#000 55%,#0000 0) bottom/100% 18.18%; background: linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat #ddd; animation:p8 2s infinite steps(7); } @keyframes p8 { 100% {background-size:100% 115%} } 对linear-gradient描绘的角度做调整,再加上蒙版。
#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%; background-repeat: no-repeat; background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em; animation:...
完整的代码你可以戳这里:CodePen Demo -- Linear loading OK,还会有同学说了,我不想引入 SVG 标签,我只想使用纯 CSS 方案。这里,还有一种利用 CSS @property 的纯 CSS 方案。 方法三:使用 CSS @property 让 conic-gradient 动起来 这里我们需要借助 CSS @property 的能力,使得本来无法实现动画效果的角向渐变...
conic-gradient() - CSS:层叠样式表 | MDN (mozilla.org)[1] 通过锥形渐变,可以很轻松的实现这样一个效果,透明到纯色的渐变。 复制 loading{background:conic-gradient(transparent10%,royalblue90%) } 1. 2. 3. 效果如下: 然后,整体是一个环形,可以通过径向渐变配合mask遮罩实现。
.progress-1{width:120px;height:20px;background:linear-gradient(#00000)0/0%no-repeat#ddd;animation:p12sinfinitelinear; }@keyframesp1{100%{background-size:100%} }linear-gradient(#00000)你可以理解为linear-gradient(#0000100%),如果还不熟悉,复制linear-gradient(#000050%,#f0050%0),替换原先的部...
linear-gradient(orange 0 0) 0/0% no-repeat lightblue; animation:p2 2s infinite steps(10); } @keyframes p2 { 100% {background-size:110%} } steps(10)是step(10, end)的简写,指明刚开始没有,所以有第2点的处理 100% {background-size...
{animation:loading-2 1s ease-in .5s infinite;}.loading_2 i:nth-child(6){animation:loading-2 1s ease-in .6s infinite;}@keyframes loading-3{0%{/*background: linear-gradient(transparent 0%);*/opacity:1;transform:scale(2);}100%{/*background: linear-gradient(transparent 0%,transparent ...