loading加载动画

最新推荐文章于 2024-01-29 11:53:25 发布
最新推荐文章于 2024-01-29 11:53:25 发布
阅读量720 收藏 8
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/accumulate_/article/details/117327632
版权

经典款

经典款

<div class="classic-1"></div>
<div class="classic-2"></div>
<div class="classic-3"></div>
<div class="classic-4"></div>
<div class="classic-5"></div>
<div class="classic-6"></div>
<div class="classic-7"></div>
<div class="classic-8"></div>
<div class="classic-9"></div>
<div class="classic-10"></div>

[class*=classic]:before {
  content:"Loading...";
}

.classic-1 {
  font-weight: bold;
  font-family: sans-serif;
  font-size: 30px;
  animation:c1 1s linear infinite alternate;
}
@keyframes c1 {to{opacity: 0}}

.classic-2 {
  font-weight: bold;
  font-family: sans-serif;
  font-size: 30px;
  padding-bottom: 8px;
  background:linear-gradient(currentColor 0 0) bottom left/0% 3px no-repeat;
  animation:c2 2s linear infinite;
}
@keyframes c2 {to{background-size: 100% 3px}}

.classic-3 {
  font-weight: bold;
  font-family: sans-serif;
  font-size: 30px;
  padding:0 5px 8px 0;
  background:repeating-linear-gradient(90deg,currentColor 0 8%,#0000 0 10%) 200% 100%/200% 3px no-repeat;
  animation:c3 2s steps(6) infinite;
}
@keyframes c3 {to{background-position: 80% 100%}}

.classic-4 {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  clip-path: inset(0 3ch 0 0);
  animation:c4 1s steps(4) infinite;
}
@keyframes c4 {to{clip-path: inset(0 -1ch 0 0)}}

.classic-5 {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  clip-path: inset(0 100% 0 0);
  animation:c5 2s steps(11) infinite;
}
@keyframes c5 {to{clip-path: inset(0 -1ch 0 0)}}

.classic-6 {
  --c:#000;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  color:#0000;
  overflow:hidden;
  text-shadow:0 0 var(--c),11ch 0 var(--c);
  animation:c6 2s infinite linear;
}
@keyframes c6 {to{text-shadow:-11ch 0 var(--c),0ch 0 var(--c)}}

.classic-7 {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  color:#0000;
  background:linear-gradient(90deg,red calc(50% + 0.5ch),#000 0) right/calc(200% + 1ch) 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:c7 2s infinite steps(11);
}
@keyframes c7 {to{background-position: left}}

.classic-8 {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  color:#0000;
  background:linear-gradient(90deg,#000 calc(50% - 0.5ch),red 0 calc(50% + 0.5ch),#000 0) right/calc(200% + 1ch) 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:c8 2s infinite steps(11);
}
@keyframes c8 {to{background-position: left}}


.classic-9 {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  color:#0000;
  overflow:hidden;
  text-shadow:0 0 #000,11ch 0 green,22ch 0 red,33ch 0 blue,44ch 0 #000;
  animation:c9 5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes c9 {
    25% {text-shadow:-11ch 0 #000,  0ch 0 green, 11ch 0 red, 22ch 0 blue,33ch 0 #000}
    50% {text-shadow:-22ch 0 #000,-11ch 0 green,  0ch 0 red, 11ch 0 blue,22ch 0 #000}
    75% {text-shadow:-33ch 0 #000,-22ch 0 green,-11ch 0 red,  0ch 0 blue,11ch 0 #000}
    100%{text-shadow:-44ch 0 #000,-33ch 0 green,-22ch 0 red,-11ch 0 blue, 0ch 0 #000}
}

.classic-10 {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  color:#0000;
  background: linear-gradient(90deg,#000 25%,green 0 50%,red 0 75%,blue 0) 0 0/400% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:c10 5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes c10 {
  25% {background-position: calc(1*100%/3) 0}
  50% {background-position: calc(2*100%/3) 0}
  75% {background-position: calc(3*100%/3) 0}
  100%{background-position: calc(4*100%/3) 0}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}

无限循环款

在这里插入图片描述

<div class="infinity-1"></div>
<div class="infinity-2"></div>
<div class="infinity-3"></div>
<div class="infinity-4"></div>
<div class="infinity-5"></div>
<div class="infinity-6"></div>
<div class="infinity-7"></div>
<div class="infinity-8"></div>
<div class="infinity-9"></div>
<div class="infinity-10"></div>

.infinity-1 {
  width:90px;
  height:14px;
  background: repeating-linear-gradient(90deg, currentColor 0 calc(25% - 5px),#0000 0 25%) left/calc(4*100%/3) 100%;
  animation:i1 0.5s infinite linear;
}
@keyframes i1 {
    100% {background-position: right}
}

.infinity-2 {
  width:90px;
  height:14px;
  background: radial-gradient(circle closest-side, currentColor 92%,#0000 ) calc(100%/3) 0/calc(100%/4) 100%;
  animation:i2 0.5s infinite linear;
}
@keyframes i2 {
    100% {background-position: 0 0}
}

.infinity-3 {
  width:calc(80px / 0.707); /* 0.707 = cos(45deg) */
  height:14px;
  background: repeating-linear-gradient(-45deg, currentColor 0 15px,#0000 0 20px) left/200% 100%;
  animation:i3 2s infinite linear;
}
@keyframes i3 {
    100% {background-position:right}
}


.infinity-4 {
  width:calc(80px / 0.707);
  height:14px;
  background: 
    repeating-linear-gradient(135deg, currentColor 0 15px,#0000 0 20px) left top,
    repeating-linear-gradient( 45deg, currentColor 0 15px,#0000 0 20px) left bottom;
  background-size:  200% 50%;
  background-repeat: no-repeat;
  animation:i4 2s infinite linear;
}
@keyframes i4 {
    100% {background-position:top right,bottom right}
}

.infinity-5 {
  width:90px;
  height:14px;
  background: 
    radial-gradient(circle 10px at right 7px top 50%,#0000 92%,currentColor),
    radial-gradient(circle 10px at right 0   top 50%,currentColor 92%,#0000);
  background-size: calc(100%/3) 100%; 
  background-position: 50% 0%;
  animation:i5 .5s infinite linear;
}
@keyframes i5 {
    100% {background-position: 0% 0%}
}

.infinity-6 {
  width:90px;
  height:14px;
  background: 
    conic-gradient(from   45deg at calc(100% - 7px) 50%,currentColor 90deg,#0000 0),
    conic-gradient(from -135deg at             7px  50%,currentColor 90deg,#0000 0);
  background-position: calc(100%/3) 0;
  background-size:calc(100%/4) 100%;
  animation:i6 0.5s infinite linear;
}
@keyframes i6 {
    100% {background-position: 0 0}
}

.infinity-7 {
  width:90px;
  height:14px;
  background: 
    linear-gradient(90deg,currentColor 50%,#0000 0) repeat-x,
    conic-gradient(from 45deg at right 7px top  50%,currentColor 90deg,#0000 0);
  background-position: calc(100%/3) 50%;
  background-size:calc(100%/4) 60%,calc(100%/4) 100%;
  animation:i7 0.5s infinite linear;
}
@keyframes i7 {
    100% {background-position: 0 50%}
}
.infinity-8 {
  width:90px;
  height:12px;
  background: 
    linear-gradient(90deg ,currentColor 50%,#0000 0) 0 0%,
    linear-gradient(-90deg,currentColor 50%,#0000 0) 0 50%,
    linear-gradient(90deg ,currentColor 50%,#0000 0) 0 100%;
  background-size: 8px calc(100%/3);
  background-repeat: repeat-x;
  animation:i8 .25s infinite linear;
}
@keyframes i8 {
    100% {background-position: -8px 0%,-8px 50%,-8px 100%}
}

.infinity-9 {
  width:90px;
  height:14px;
  background: 
    linear-gradient(90deg,#0000 16px, currentColor 0 30px, #0000 0),
    radial-gradient(circle closest-side at 68% 50%, currentColor 92%,#0000),
    conic-gradient(from   45deg at calc(100% - 7px) 50%,currentColor 90deg,#0000 0),
    conic-gradient(from -135deg at             7px  50%,currentColor 90deg,#0000 0);
  background-position: 0 0;
  background-size:calc(3*100%/4) 100%;
  background-repeat: repeat-x;
  animation:i9 2s infinite linear;
}
@keyframes i9 {
    100% {background-position: -300% 0}
}

.infinity-10 {
  width:90px;
  height:12px;
  background: 
    linear-gradient( 90deg,currentColor 50%,#0000 0) 0 0%,
    linear-gradient(-90deg,currentColor 50%,#0000 0) 0 0%;
  background-size: 20px 100%;
  background-repeat: repeat-x;
  animation:i10 1s infinite linear;
}
@keyframes i10 {
    100% {background-position: -20px 0%,20px 0%}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

div[class]:nth-child(odd) {
  color:darkblue;
}

* {
  box-sizing: border-box;
}

多点动画款

在这里插入图片描述

<div class="dots-1"></div>
<div class="dots-2"></div>
<div class="dots-3"></div>
<div class="dots-4"></div>
<div class="dots-5"></div>
<div class="dots-6"></div>
<div class="dots-7"></div>
<div class="dots-8"></div>
<div class="dots-9"></div>
<div class="dots-10"></div>

.dots-1 {
  width:50px;
  height:12px;
  background: radial-gradient(circle closest-side,currentColor 90%,#0000) 0 0/33% 100% space;
  clip-path: inset(0 100% 0 0);
  animation:d1 1s steps(4) infinite;
}
@keyframes d1 {to{clip-path: inset(0 -34% 0 0)}}

.dots-2 {
  width:50px;
  height:12px;
  background: radial-gradient(circle closest-side,currentColor 90%,#0000) 0 0/33% 100% no-repeat;
  animation:d2 1s steps(3) infinite;
}
@keyframes d2 {to{background-position:150% 0}}

.dots-3 {
  width:50px;
  height:24px;
  background: 
    radial-gradient(circle closest-side,currentColor 90%,#0000) 0%   50%,
    radial-gradient(circle closest-side,currentColor 90%,#0000) 50%  50%,
    radial-gradient(circle closest-side,currentColor 90%,#0000) 100% 50%;
  background-size:calc(100%/3) 12px;
  background-repeat: no-repeat;
  animation:d3 1s infinite linear;
}
@keyframes d3 {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}

.dots-4 {
  width:50px;
  height:12px;
  background: 
    radial-gradient(circle closest-side at left  6px top 50%,currentColor 90%,#0000),
    radial-gradient(circle closest-side                     ,currentColor 90%,#0000),
    radial-gradient(circle closest-side at right 6px top 50%,currentColor 90%,#0000);
  background-size:100% 100%;
  background-repeat: no-repeat;
  animation:d4 1s infinite alternate;
}
@keyframes d4 {
    to{width:20px;height:24px}
}

.dots-5 {
  width:12px;
  height:12px;
  background: #000000;
  border-radius: 50%;
  box-shadow: 20px 0 #00000022,-20px 0 #000000;
  animation:d5 1s infinite linear alternate;
}
@keyframes d5 {
    0% {box-shadow: 20px 0 #000000,-20px 0 #00000022;background: #000000}
    33%{box-shadow: 20px 0 #000000,-20px 0 #00000022;background: #00000022}
    66%{box-shadow: 20px 0 #00000022,-20px 0 #000000;background: #00000022}
}

.dots-6 {
  width:12px;
  height:12px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 12px 0 currentColor,-24px 0 currentColor;
  animation:d6 1s infinite linear alternate;
}
@keyframes d6 {
    50% {box-shadow: 12px 0 currentColor,-12px 0 currentColor}
    100%{box-shadow: 24px 0 currentColor,-12px 0 currentColor}
}

.dots-7 {
  width:50px;
  height:12px;
  background: 
    radial-gradient(circle closest-side,currentColor 90%,#0000) 0%   50%,
    radial-gradient(circle closest-side,currentColor 90%,#0000) 50%  50%,
    radial-gradient(circle closest-side,currentColor 90%,#0000) 100% 50%;
  background-size:calc(100%/3) 100%;
  background-repeat: no-repeat;
  animation:d7 1s infinite linear;
}
@keyframes d7 {
    33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
    50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
    66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
}
.dots-8 {
  width:12px;
  height:12px;
  position: relative;
}
.dots-8::before,
.dots-8::after {
  content:"";
  position: absolute;
  inset:0;
  border-radius:50%;
  background:currentColor;
}
.dots-8::before {
  box-shadow: -24px 0 currentColor;
  animation:d8-1 1s infinite linear;
}
.dots-8::after {
  transform: rotate(0deg) translateX(24px);
  animation:d8-2 1s infinite linear;
}

@keyframes d8-1 {
    100%{transform:translateX(24px)}
}
@keyframes d8-2 {
    100%{transform:rotate(-180deg) translateX(24px)}
}

.dots-9 {
  width:12px;
  height:12px;
  position: relative;
  animation:d9-0 2s infinite steps(2);
}
.dots-9::before,
.dots-9::after {
  content:"";
  position: absolute;
  inset:0;
  border-radius:50%;
  background:currentColor;
}
.dots-9::before {
  box-shadow: 24px 0 currentColor;
  transform:translateX(-24px);
  animation:d9-1 1s infinite linear alternate;
}
.dots-9::after {
  transform:translateX(12px) rotate(0deg) translateX(12px);
  animation:d9-2 1s infinite linear alternate;
}
@keyframes d9-0 {
    0% ,49.9% {transform:scale(1)}
    50%,100%{transform:scale(-1)}
}
@keyframes d9-1 {
    100%{box-shadow: 48px 0 currentColor}
}
@keyframes d9-2 {
    100%{transform:translateX(12px) rotate(-180deg) translateX(12px)}
}

.dots-10 {
  width:12px;
  height:12px;
  position: relative;
}
.dots-10::before,
.dots-10::after {
  content:"";
  position: absolute;
  inset:0;
  border-radius:50%;
  background:currentColor;
}
.dots-10::before {
  box-shadow: -24px 0 currentColor;
  animation:d10-1 2s infinite linear;
}
.dots-10::after {
  transform: rotate(0deg) translateX(24px);
  animation:d10-2 2s infinite linear;
}
@keyframes d10-1 {
    50%{transform:translateX(24px)}
}
@keyframes d10-2 {
    100%{transform:rotate(-360deg) translateX(24px)}
}


/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}
* {
  box-sizing: border-box;
}

条形款

<div class="bars-1"></div>
<div class="bars-2"></div>
<div class="bars-3"></div>
<div class="bars-4"></div>
<div class="bars-5"></div>
<div class="bars-6"></div>
<div class="bars-7"></div>
<div class="bars-8"></div>
<div class="bars-9"></div>
<div class="bars-10"></div>

.bars-1 {
  width:50px;
  height:40px;
  --c:linear-gradient(90deg, #0000 4px,currentColor 0 calc(100% - 4px),#0000 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size:calc(100%/3) 100%;
  background-repeat: no-repeat;
  animation:b1 1s infinite linear;
}
@keyframes b1 {
    33%{background-size:calc(100%/3) 10% ,calc(100%/3) 100%,calc(100%/3) 100%}
    50%{background-size:calc(100%/3) 100%,calc(100%/3) 10% ,calc(100%/3) 100%}
    66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 10% }
}

.bars-2 {
  width:50px;
  height:40px;
  --c:linear-gradient(90deg, #0000 4px,currentColor 0 calc(100% - 4px),#0000 0);
  background: 
    var(--c) 0%   100%,
    var(--c) 50%  100%,
    var(--c) 100% 100%;
  background-size:calc(100%/3) 100%;
  background-repeat: no-repeat;
  animation:b2 1s infinite linear;
}
@keyframes b2 {
    20% {background-size:calc(100%/3) 60% ,calc(100%/3) 100%,calc(100%/3) 100%}
    40% {background-size:calc(100%/3) 80% ,calc(100%/3) 60% ,calc(100%/3) 100%}
    60% {background-size:calc(100%/3) 100%,calc(100%/3) 80% ,calc(100%/3) 60% }
    80% {background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 80% }
}

.bars-3 {
  width:50px;
  height:40px;
  background: 
    linear-gradient(#0000 calc(1*100%/6),currentColor 0 calc(3*100%/6),#0000 0) left bottom,
    linear-gradient(#0000 calc(2*100%/6),currentColor 0 calc(4*100%/6),#0000 0) center bottom,
    linear-gradient(#0000 calc(3*100%/6),currentColor 0 calc(5*100%/6),#0000 0) right bottom;
  background-size:calc(100%/3 - 6px) 600%;
  background-repeat: no-repeat;
  animation:b3 1s infinite linear;
}
@keyframes b3 {
    100% {background-position: left top,center top,right top }
}

.bars-4 {
  width:50px;
  height:40px;
  --c:linear-gradient(#000 calc(50% - 10px),#0000 0 calc(50% + 10px),currentColor 0);
  background: 
    var(--c) 0%   100%,
    var(--c) 50%  100%,
    var(--c) 100% 100%;
  background-size:calc(100%/3 - 6px) calc(200% + 20px);
  background-repeat: no-repeat;
  animation:b4 1s infinite linear;
}
@keyframes b4 {
    33%  {background-position: 0% 50%,50% 100%,100% 100%}
    50%  {background-position: 0%  0%,50%  50%,100% 100%}
    66%  {background-position: 0%  0%,50%   0%,100%  50%}
    100% {background-position: 0%  0%,50%   0%,100%   0%}
}

.bars-5 {
  width:50px;
  height:60px;
  --c:linear-gradient(90deg, #0000 4px,currentColor 0 calc(100% - 4px),#0000 0);
  background: 
    var(--c) 0%   100%,
    var(--c) 50%  100%,
    var(--c) 100% 100%;
  background-size:calc(100%/3) 65%;
  background-repeat: no-repeat;
  animation:b5 1s infinite linear;
}
@keyframes b5 {
    20% {background-position:0% 50% ,50% 100%,100% 100%}
    40% {background-position:0% 0%  ,50% 50% ,100% 100%}
    60% {background-position:0% 100%,50% 0%  ,100% 50% }
    80% {background-position:0% 100%,50% 100%,100% 0%  }
}

.bars-6 {
  width:50px;
  height:60px;
  --c:linear-gradient(90deg, #0000 4px,currentColor 0 calc(100% - 4px),#0000 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size:calc(100%/3) 50%;
  background-repeat: no-repeat;
  animation:b6 1s infinite linear;
}
@keyframes b6 {
    20% {background-position:0% 0%  ,50% 50% ,100% 50% }
    40% {background-position:0% 100%,50% 0%  ,100% 50% }
    60% {background-position:0% 50% ,50% 100%,100% 0%  }
    80% {background-position:0% 50% ,50% 50% ,100% 100%}
}

.bars-7 {
  width:50px;
  height:60px;
  --c:linear-gradient(90deg, #0000 4px,currentColor 0 calc(100% - 4px),#0000 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size:calc(100%/3) 50%;
  background-repeat: no-repeat;
  animation:b7 1s infinite linear alternate;
}
@keyframes b7 {
    20% {background-size:calc(100%/3) 20% ,calc(100%/3) 50% ,calc(100%/3) 50% }
    40% {background-size:calc(100%/3) 100%,calc(100%/3) 20% ,calc(100%/3) 50% }
    60% {background-size:calc(100%/3) 50% ,calc(100%/3) 100%,calc(100%/3) 20% }
    80% {background-size:calc(100%/3) 50% ,calc(100%/3) 50% ,calc(100%/3) 100%}
}

.bars-8 {
  width:50px;
  height:60px;
  --c:linear-gradient(90deg, #0000 4px,currentColor 0 calc(100% - 4px),#0000 0);
  background: 
    var(--c) 0%   100%,
    var(--c) 50%  100%,
    var(--c) 100% 100%;
  background-size:calc(100%/3) 65%;
  background-repeat: no-repeat;
  animation:b8 1s infinite linear;
}
@keyframes b8 {
    16.67% {background-position:0% 0%  ,50% 100%,100% 100%}
    33.33% {background-position:0% 0%  ,50% 0%  ,100% 100%}
    50%    {background-position:0% 0%  ,50% 0%  ,100% 0%  }
    66.67% {background-position:0% 100%,50% 0%  ,100% 0%  }
    83.33% {background-position:0% 100%,50% 100%,100% 0%  }

}

.bars-9 {
  width:50px;
  height:60px;
  --c:linear-gradient(90deg, #0000 4px,currentColor 0 calc(100% - 4px),#0000 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size:calc(100%/3) 60%;
  background-repeat: no-repeat;
  animation:b9 1s infinite;
}
@keyframes b9 {
    33% {background-position:0% 0%  ,50% 100%,100% 0%  }
    66% {background-position:0% 100%,50% 0%  ,100% 100%}
}

.bars-10 {
  width:51px;
  height:45px;
  background: 
    linear-gradient(90deg, #0000 4px,currentColor 0 calc(100% - 4px),#0000 0) 50% 0,
    linear-gradient(90deg, #0000 4px,currentColor 0 calc(100% - 4px),#0000 0) 50% 100%;
  background-size:calc(100%/3) 50%;
  background-repeat: repeat-x;
  animation:b10 1.5s infinite;
}
@keyframes b10 {
  33%  {background-position: calc(50% - 4px) 0%  ,calc(50% + 4px) 100%}
  66%  {background-position: calc(50% - 4px) 100%,calc(50% + 4px) 0%  }
  100% {background-position: 50% 100%            ,50% 0%  }
}


/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}
div[class]:nth-child(odd) {
  color:darkblue;
}
* {
  box-sizing: border-box;
}

旋转动画款

在这里插入图片描述

<div class="spinner-1"></div>
<div class="spinner-2"></div>
<div class="spinner-3"></div>
<div class="spinner-4"></div>
<div class="spinner-5"></div>
<div class="spinner-6"></div>
<div class="spinner-7"></div>
<div class="spinner-8"></div>
<div class="spinner-9"></div>
<div class="spinner-10"></div>

.spinner-1 {
  width:50px;
  height:50px;
  border-radius:50%;
  border:8px solid;
  border-color:#000 #0000;
  animation:s1 1s infinite;
}
@keyframes s1 {to{transform: rotate(.5turn)}}

.spinner-2 {
  width:50px;
  height:50px;
  border-radius:50%;
  border:8px solid;
  border-color:lightblue;
  border-right-color: orange;
  animation:s2 1s infinite linear;
}
@keyframes s2 {to{transform: rotate(1turn)}}

.spinner-3 {
  width:50px;
  height:50px;
  border-radius:50%;
  background:conic-gradient(#0000 10%,#25b09b);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation:s3 1s infinite linear;
}
@keyframes s3 {to{transform: rotate(1turn)}}

.spinner-4 {
  width:50px;
  height:50px;
  border-radius:50%;
  padding:1px;
  background:conic-gradient(#0000 10%,#f03355) content-box;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
    radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 calc(100% - 8px));
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  animation:s4 1s infinite steps(10);
}
@keyframes s4 {to{transform: rotate(1turn)}}

.spinner-5 {
  width:50px;
  height:50px;
  border-radius:50%;
  background:#514b82;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg),
    radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 calc(100% - 8px));
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  animation:s5 1s infinite ;
}
@keyframes s5 {to{transform: rotate(.5turn)}}

.spinner-6 {
  width:50px;
  height:50px;
  border-radius:50%;
  padding:3px;
  background: 
    radial-gradient(farthest-side,#ffa516 95%,#0000) 50% 0/12px 12px no-repeat,
    radial-gradient(farthest-side,#0000 calc(100% - 5px),#ffa516 calc(100% - 4px)) content-box;
  animation:s6 2s infinite ;
}
@keyframes s6 {to{transform: rotate(1turn)}}

.spinner-7 {
  width:50px;
  height:50px;
  --c:radial-gradient(farthest-side,#25b09b 92%,#0000);
  background: 
    var(--c) 50% 0,
    var(--c) 50% 100%,
    var(--c) 100% 50%,
    var(--c) 0    50%;
  background-size:12px 12px;
  background-repeat:no-repeat;
  animation:s7 1s infinite;
}
@keyframes s7 {to{transform: rotate(.5turn)}}

.spinner-8 {
  width:50px;
  height:50px;
  color:#f03355;
  --c:radial-gradient(farthest-side,currentColor 92%,#0000);
  background: 
    var(--c) 50% 0   /12px 12px,
    var(--c) 50% 100%/12px 12px,
    var(--c) 100% 50%/12px 12px,
    var(--c) 0    50%/12px 12px,
    var(--c) 50%  50%/12px 12px,
    linear-gradient(currentColor 0 0) 50% 50%/4px 100%,
    linear-gradient(currentColor 0 0) 50% 50%/100% 4px;
  background-repeat:no-repeat;
  animation:s8 1s infinite linear;
}
@keyframes s8 {to{transform: rotate(.5turn)}}

.spinner-9 {
  width:50px;
  height:50px;
  border-radius:50%;
  background: 
    radial-gradient(farthest-side,#f03355 95%,#0000) 50% 1px/12px 12px no-repeat,
    radial-gradient(farthest-side,#0000 calc(100% - 14px),#ccc 0);
  animation:s9 2s infinite linear;
}
@keyframes s9 {to{transform: rotate(1turn)}}

.spinner-10 {
  width:50px;
  height:50px;
  border-radius:50%;
  color:#854f1d;
  background: 
    linear-gradient(currentColor 0 0) center/100% 4px,
    linear-gradient(currentColor 0 0) center/4px 100%,
    radial-gradient(farthest-side,#0000 calc(100% - 6px),currentColor calc(100% - 5px)),
    radial-gradient(circle 6px,currentColor 94%,#0000 0);
  background-repeat: no-repeat;
  animation:s10 2s infinite linear;
  position: relative;
}
.spinner-10:before {
  content: "";
  position: absolute;
  inset:0;
  border-radius: inherit;
  background:inherit;
  transform:rotate(45deg);
}
@keyframes s10 {to{transform: rotate(.5turn)}}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}

连续款

在这里插入图片描述

<div class="continuous-1"></div>
<div class="continuous-2"></div>
<div class="continuous-3"></div>
<div class="continuous-4"></div>
<div class="continuous-5"></div>
<div class="continuous-6"></div>
<div class="continuous-7"></div>
<div class="continuous-8"></div>
<div class="continuous-9"></div>
<div class="continuous-10"></div>

.continuous-1 {
  width: 120px;
  height:20px;
  background: 
    linear-gradient(90deg,#0001 33%,#0005 50%,#0001 66%)
    #f2f2f2;
  background-size:300% 100%;
  animation: ct1 1s infinite linear;
}

@keyframes ct1 {
  0% {background-position: right}
}


.continuous-2 {
  width: 120px;
  height: 20px;
  background: 
    linear-gradient(90deg, #0000 ,orange) left -50px top 0/50px 20px no-repeat 
    lightblue;
  animation: ct2 1s infinite linear;
}

@keyframes ct2 {
  100% {background-position: right -50px top 0}
}

.continuous-3 {
  width: 120px;
  height: 20px;
  transform: skewX(-45deg);
  background: 
    linear-gradient(#f03355 0 0) left -30px top 0/30px 20px no-repeat 
    #ccc;
  animation: ct3 1s infinite linear;
}

@keyframes ct3 {
  100% {background-position: right -30px top 0}
}

.continuous-4 {
  width: 120px;
  height: 22px;
  border-radius: 40px;
  color: #514b82;
  border: 2px solid;
  position: relative;
  overflow: hidden;
}

.continuous-4::before {
  content: "";
  position: absolute;
  margin: 2px;
  width: 14px;
  top: 0;
  bottom: 0;
  left: -20px;
  border-radius: inherit;
  background: currentColor;
  box-shadow: -10px 0 12px 3px currentColor;
  clip-path: polygon(0 5%, 100% 0,100% 100%,0 95%,-30px 50%);
  animation: ct4 1s infinite linear;
}

@keyframes ct4 {
  100% {left: calc(100% + 20px)}
}

.continuous-5 {
    width: 120px;
    height: 20px;
    background: 
      linear-gradient(#25b09b 0 0) left -40px top 0/40px 20px,
      linear-gradient(#ddd 0 0) center/100% 50%; 
    background-repeat: no-repeat;
    animation: ct5 1s infinite linear;
}

@keyframes ct5 {
  100% {background-position: right -40px top 0,center}
}

.continuous-6 {
    width: 120px;
    height: 20px;
    background: 
      radial-gradient(circle 10px,#000 95%,#0000 )  right /calc(200% + 20px) 100%,
      linear-gradient(#000 0 0) center/100% 6px; 
    background-repeat: no-repeat; 
    -webkit-mask: radial-gradient(circle 4px,#0000 93%,#000 ) right/calc(200% + 20px) 100%;
    animation: ct6 1s infinite linear;
}

@keyframes ct6 {
  100% {background-position: left;-webkit-mask-position:left}
}

.continuous-7 {
  width:120px;
  height:20px;
  -webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) left/20% 100%;
  background:
   linear-gradient(#000 0 0) left -25% top 0 /20% 100% no-repeat
   #ddd;
  animation:ct7 1s infinite steps(6);
}
@keyframes ct7 {
    100% {background-position: right -25% top 0}
}

.continuous-8 {
    width: 40px;
    height: 40px;
    background:
      linear-gradient(to bottom right,#0000 calc(50% - 40px),#fff 50%,#0000 calc(50% + 40px)) 
      bottom right/calc(200% + 80px) calc(200% + 80px) 
      orange;
    animation: ct8 1s infinite ;
}
@keyframes ct8 {
    100% {background-position: top left}
}

.continuous-9 {
    width: 120px;
    height: 20px;
    background: 
      radial-gradient(circle closest-side,#f03355 94%,#0000) 50% 50%/calc(50% + 10px) 70% repeat-x 
      #ccc;
    animation: ct9 1s infinite cubic-bezier(0.3,1,0,1);
}

@keyframes ct9 {
  100% {background-position: calc(200% - 5px)}
}

.continuous-10 {
    width: 120px;
    height: 20px;
    background: linear-gradient(#514b82 0 0) left -40px top 0/40px 100% no-repeat #eee;
    -webkit-mask:
      linear-gradient(#000 0 0) top   /100% 5px no-repeat,
      linear-gradient(#000 0 0) bottom/100% 5px no-repeat,
      repeating-linear-gradient(90deg,#000 0 5px, #0000 0 20%) left/calc(100% - 5px) 100%;
    animation: ct10 1s infinite linear;
}

@keyframes ct10 {
  100% {background-position: right -40px top 0}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}

进度条款

在这里插入图片描述

<div class="progress-1"></div>
<div class="progress-2"></div>
<div class="progress-3"></div>
<div class="progress-4"></div>
<div class="progress-5"></div>
<div class="progress-6"></div>
<div class="progress-7"></div>
<div class="progress-8"></div>
<div class="progress-9"></div>
<div class="progress-10"></div>

.progress-1 {
  width:120px;
  height:20px;
  background:
   linear-gradient(#000 0 0) left/0% 100% no-repeat
   #ddd;
  animation:p1 2s infinite linear;
}
@keyframes p1 {
    100% {background-size:100% 100%}
}

.progress-2 {
  width:120px;
  height:20px;
  border-radius: 20px;
  background:
   linear-gradient(orange 0 0) left/0% 100% no-repeat
   lightblue;
  animation:p2 2s infinite steps(10);
}
@keyframes p2 {
    100% {background-size:110% 100%}
}

.progress-3 {
  width:120px;
  height:20px;
  border-radius: 20px;
  background:
   repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) left/0%   100% no-repeat,
   repeating-linear-gradient(135deg,#ddd    0 10px,#eee    0 20px) left/100% 100%;
  animation:p3 2s infinite;
}
@keyframes p3 {
    100% {background-size:100% 100%}
}

.progress-4 {
  width:120px;
  height:20px;
  -webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) left/20% 100%;
  background:
   linear-gradient(#000 0 0) left/0% 100% no-repeat
   #ddd;
  animation:p4 2s infinite steps(6);
}
@keyframes p4 {
    100% {background-size:120% 100% }
}

.progress-5 {
  width:80px;
  height:40px;
  border:2px solid currentColor;
  border-right-color: transparent;
  padding:3px;
  background: repeating-linear-gradient(90deg,currentColor 0 10px,#0000 0 15px) left/0% 100% no-repeat content-box content-box;
  position: relative;
  animation:p4 2s infinite steps(6);
}
.progress-5::before {
  content:"";
  position: absolute;
  top:-2px;
  bottom:-2px;
  left:100%;
  width:10px;
  background:
    linear-gradient(
        #0000   calc(50% - 7px),currentColor 0 calc(50% - 5px),
        #0000 0 calc(50% + 5px),currentColor 0 calc(50% + 7px),#0000 0) left /100% 100%,
    linear-gradient(currentColor calc(50% - 5px),#0000        0 calc(50% + 5px),currentColor 0) left /2px 100%,
    linear-gradient(#0000        calc(50% - 5px),currentColor 0 calc(50% + 5px),#0000        0) right/2px 100%;
  background-repeat:no-repeat;
}
@keyframes p5 {
    100% {background-size:120% 100%}
}

.progress-6 {
  width:120px;
  height:22px;
  border-radius: 20px;
  color:#514b82;
  border:2px solid;
  position: relative;
}
.progress-6::before {
  content:"";
  position: absolute;
  margin:2px;
  inset:0 100% 0 0;
  border-radius: inherit;
  background:currentColor;
  animation:p6 1.5s infinite;
}
@keyframes p6 {
    100% {inset:0}
}

.progress-7 {
  width:120px;
  height:24px;
  -webkit-mask:
    radial-gradient(circle closest-side,#000 94%,#0000) 0 0/25% 100%,
    linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
  background:
   linear-gradient(#25b09b 0 0) left/0% 100% no-repeat
   #ddd;
  animation:p7 2s infinite linear;
}
@keyframes p7 {
    100% {background-size:100% 100%}
}

.progress-8 {
  width:60px;
  height:60px;
  border-radius: 50%;
  -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%}
}


.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%}
}


.progress-10 {
  width:120px;
  height:60px;
  border-radius:200px 200px 0 0;
  -webkit-mask:repeating-radial-gradient(farthest-side at bottom ,#0000 0,#000 1px 12%,#0000 calc(12% + 1px) 20%);
  background:
   radial-gradient(farthest-side at bottom,#514b82 0 95%,#0000 0) bottom/0% 0% no-repeat
   #ddd;
  animation:p10 2s infinite steps(6);
}
@keyframes p10 {
    100% {background-size:120% 120%}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}

晃动款

在这里插入图片描述

<div class="wobbling-1"></div>
<div class="wobbling-2"></div>
<div class="wobbling-3"></div>
<div class="wobbling-4"></div>
<div class="wobbling-5"></div>
<div class="wobbling-6"></div>
<div class="wobbling-7"></div>
<div class="wobbling-8"></div>
<div class="wobbling-9"></div>
<div class="wobbling-10"></div>

.wobbling-1 {
  width:120px;
  height:20px;
  background:
   linear-gradient(#000 0 0) left/20px 20px no-repeat
   #ddd;
  animation:w1 1s infinite linear;
}
@keyframes w1 {
    50% {background-position: right }
}

.wobbling-2 {
  width:120px;
  height:20px;
  border-radius: 20px;
  background:
   radial-gradient(farthest-side,orange 94%,#0000 ) left/20px 20px no-repeat
   lightblue;
  animation:w2 1s infinite linear;
}
@keyframes w2 {
    50% {background-position:right }
}


.wobbling-3 {
  width:120px;
  height:22px;
  border-radius: 40px;
  color:#514b82 ;
  border:2px solid;
  position: relative;
}
.wobbling-3::before {
  content:"";
  position: absolute;
  margin:2px;
  width:25%;
  top:0;
  bottom:0;
  left:0;
  border-radius: inherit;
  background:currentColor;
  animation:w3 1s infinite linear;
}
@keyframes w3 {
    50% {left:100%;transform: translateX(calc(-100% - 4px))}
}


.wobbling-4 {
  width:20px;
  height:20px;
  background:#25b09b;
  box-shadow:0 0 60px 15px #25b09b;
  transform: translate(-80px);
  clip-path:inset(0);
  animation:
    w4-1 0.5s ease-in-out infinite alternate,
    w4-2 1s   ease-in-out infinite;
}

@keyframes w4-1 {
  100% {transform:translateX(80px)}
}

@keyframes w4-2 {
   33% {clip-path:inset(0 0 0 -100px)}
   50% {clip-path:inset(0 0 0 0)     }
   83% {clip-path:inset(0 -100px 0 0)}
}

.wobbling-5 {
  width:120px;
  height:20px;
  clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);
  background:
   conic-gradient(from 135deg at top   ,#f03355 90deg,#0000 0) top    left,
   conic-gradient(from -45deg at bottom,#f03355 90deg,#0000 0) bottom left,
   #ccc;
  background-size: 20px 50%;
  background-repeat: no-repeat;
  animation:w5 1s infinite linear;
}
@keyframes w5 {
    50% {background-position:top right,bottom right }
}

.wobbling-6 {
  width:120px;
  height:21px;
  background:
   linear-gradient(#000 0 0) left/10px 100% no-repeat
   #ddd;
  animation:w6 1s infinite cubic-bezier(0,0.2,1,1);
  position: relative;
}
.wobbling-6:before,
.wobbling-6:after {
  content: "";
  position: absolute;
  left:0;
  right:0;
  height:7px;
  background:
    linear-gradient(#000 0 0) left/10px 100% no-repeat
    #ddd;
  animation: inherit;
}
.wobbling-6:before {
  top:0;
  animation-timing-function: cubic-bezier(0,0,1,1);
}
.wobbling-6:after {
  bottom:0;
  animation-timing-function: cubic-bezier(0,0.4,1,1);
}
@keyframes w6 {
    50% {background-position: right }
}

.wobbling-7{
  width:20px;
  height:20px;
  border-radius:50%;
  background:radial-gradient(at 30% 30%,#0000,#000a) red;
  position: relative;
  left:0px;
  top: 0px;
  animation: 
    w7-1 0.6s, 
    w7-2 0.3s;
  animation-timing-function:cubic-bezier(.5,-200,.5,200);
  animation-iteration-count:infinite;
}
@keyframes w7-1 { 
    100% { left:1px; } 
}
@keyframes w7-2 { 
    100% { top :0.3px; } 
}

.wobbling-8{
  width:20px;
  height:20px;
  border-radius:50%;
  position: relative;
  transform-origin:50% -200%;
  background:radial-gradient(at 30% 30%,#0000,#000a) red;
  animation: w8 1s cubic-bezier(.5,-200,.5,200) infinite;
}
.wobbling-8:before {
  content: "";
  position: absolute;
  inset:-200% 8px 100%;
  background:#ddd; 
}
@keyframes w8 { 
    100% { transform:rotate(1deg)} 
}

.wobbling-9{
  width:80px;
  height:20px;
  color:#514b82;
  background:
    radial-gradient(farthest-side,currentColor 98%,#0000) left  /20px 20px,
    radial-gradient(farthest-side,currentColor 98%,#0000) right /20px 20px,
    radial-gradient(farthest-side,#000 98%,#0000) center/5px 5px,
    linear-gradient(currentColor 0 0) center/100% 2px;
  background-repeat: no-repeat;
  animation: w8 1s cubic-bezier(.5,-150,.5,150) infinite;
}

@keyframes w9 { 
    100% { transform:rotate(1deg)} 
}


.wobbling-10 {
    width: calc(100px - 14px);
    height: 50px;
    border-radius: 50px;
    background: 
      radial-gradient(farthest-side,#0000 calc(100% - 15px),#ccc calc(100% - 14px) 99%,#0000) left,
      radial-gradient(farthest-side,#0000 calc(100% - 15px),#ccc calc(100% - 14px) 99%,#0000) right;
    background-size: calc(50% + 7px) 100%;
    background-repeat: no-repeat;
    position: relative;
   animation: w10-0 1s infinite linear;
}
.wobbling-10:before {
  content: "";
  position: absolute;
  inset:0;
  margin:auto; 
  width:10px;
  height: 10px;
  border-radius: 50%;
  background:#f03355;
  transform-origin: -14px 50%;
  animation: w10-1 0.5s infinite linear;
}

@keyframes w10-0 { 
    0%,49.99% { transform:scaleX(1)}
    50%,100% { transform:scaleX(-1)} 
}

@keyframes w10-1 { 
    100% { transform:rotate(1turn)} 
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}

几何变形款

在这里插入图片描述

<div class="shapes-1"></div>
<div class="shapes-2"></div>
<div class="shapes-3"></div>
<div class="shapes-4"></div>
<div class="shapes-5"></div>
<div class="shapes-6"></div>
<div class="shapes-7"></div>
<div class="shapes-8"></div>
<div class="shapes-9"></div>
<div class="shapes-10"></div>

.shapes-1 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background:#f03355;
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    animation: sh1 2s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes sh1 {
  33% {border-radius: 0;background:#514b82 ;clip-path: polygon(0 0,100% 0,100% 100%,0 100%)}
  66% {border-radius: 0;background:#ffa516 ;clip-path: polygon(50% 0,50% 0,100% 100%,0 100%)}
}

.shapes-2 {
    width: 40px;
    height: 40px;
    background:#25b09b;
    clip-path: polygon(0 0,100% 0,100% 100%);
    animation: sh2 2s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes sh2 {
  25%  {clip-path: polygon(0    0,100% 0   ,0 100%)}
  50%  {clip-path: polygon(0    0,100% 100%,0 100%)}
  75%  {clip-path: polygon(100% 0,100% 100%,0 100%)}
  100% {clip-path: polygon(100% 0,100% 100%,0 0   )}
}

.shapes-3 {
  width: 50px;
  height: 50px;
  display: flex;
  transform:rotate(45deg);
  animation: sh3-0 1.5s infinite linear;
}
.shapes-3:before,
.shapes-3:after {
  content: "";
  width:50%;
  background:#514b82;
  clip-path: polygon(0 50%,100% 0,100% 100%);
  animation: inherit;
  animation-name: sh3-1;
}
.shapes-3:after {
  clip-path: polygon(0 0,100% 50%,0% 100%);
  animation-name: sh3-2;
}
@keyframes sh3-0 {
  25% {width:50px;height:50px;transform:rotate(0)}
  50% {width:50px;height:50px}
  75% {width:70.70px;height:35.35px}
  100%{width:70.70px;height:35.35px;transform:rotate(0)}
}
@keyframes sh3-1 {
  0%,25% {clip-path: polygon(0 50% ,100% 0,100% 100%);transform:translate(0.3px)}
  50%    {clip-path: polygon(0 50% ,100% 0,100% 100%);transform:translate(-5px)}
  75%    {clip-path: polygon(0 100%,0    0,100% 100%);transform:translate(-5px)}
  100%   {clip-path: polygon(0 100%,0    0,100% 100%);transform:translate(17.7px)}
}
@keyframes sh3-2 {
  0%,25% {clip-path: polygon(0 0,100% 50%,0    100%);transform:translate(-0.3px) }
  50%    {clip-path: polygon(0 0,100% 50%,0    100%);transform:translate(5px) }
  75%    {clip-path: polygon(0 0,100% 0  ,100% 100%);transform:translate(5px)}
  100%   {clip-path: polygon(0 0,100% 0  ,100% 100%);transform:translate(-17.7px) }
}

.shapes-4 {
    width: 40px;
    height: 40px;
    color:#f03355;
    background:
      conic-gradient(from  -45deg at top    20px left 50% ,#0000 ,currentColor 1deg 90deg,#0000 91deg),
      conic-gradient(from   45deg at right  20px top  50% ,#0000 ,currentColor 1deg 90deg,#0000 91deg),
      conic-gradient(from  135deg at bottom 20px left 50% ,#0000 ,currentColor 1deg 90deg,#0000 91deg),
      conic-gradient(from -135deg at left   20px top  50% ,#0000 ,currentColor 1deg 90deg,#0000 91deg);
    animation: sh4 1.5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes sh4 {
   50%  {width:60px;height: 60px;transform: rotate(180deg)}
   100% {transform: rotate(360deg)}
}

.shapes-5 {
    width: 40px;
    height: 40px;
    color:orange;
    background:
      linear-gradient(currentColor 0 0),
      linear-gradient(currentColor 0 0),
      linear-gradient(currentColor 0 0),
      linear-gradient(currentColor 0 0);
    background-size: 21px 21px;
    background-repeat:no-repeat;
    animation: sh5 1.5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes sh5 {
   0%   {background-position: 0    0,100% 0   ,100% 100%,0 100%}
   33%  {background-position: 0    0,100% 0   ,100% 100%,0 100%;width:60px;height: 60px}
   66%  {background-position: 100% 0,100% 100%,0    100%,0 0   ;width:60px;height: 60px}
   100% {background-position: 100% 0,100% 100%,0    100%,0 0   }
}

.shapes-6 {
  width: 40px;
  height: 40px;
  display: grid;
  animation: sh6-0 1.5s infinite linear;
}
.shapes-6:before,
.shapes-6:after {
  content: "";
  grid-area: 1/1;
  background:#514b82;
  animation: 
    sh6-1 1.5s infinite linear,
    sh6-2 1.5s infinite linear;
}
.shapes-6:after {
  --s:-1;
  animation-direction: reverse;
}

@keyframes sh6-0 {
  0%,9%,91%,100% {background:#514b82}
  10%,90%        {background:#0000}
}
@keyframes sh6-1 {
  0%,33%   {clip-path: polygon(0   0,50% 100%,100% 0,100% 100%,0 100%)}
  66%,100% {clip-path: polygon(50% 0,50% 100%,50%  0,100% 100%,0 100%)}
}
@keyframes sh6-2 {
  0%,10%,90%,100% {transform: scale(var(--s,1)) translateY(0)}
  33%,66%         {transform: scale(var(--s,1)) translateY(50%)}
}

.shapes-7 {
  width: 40px;
  height: 40px;
  color:#f03355;
  position: relative;
  background:
    conic-gradient(from 134deg at top   ,currentColor 92deg,#0000 0) top,
    conic-gradient(from -46deg at bottom,currentColor 92deg,#0000 0) bottom;
  background-size:100% 50%;
  background-repeat: no-repeat;
}
.shapes-7:before {
  content:'';
  position: absolute;
  inset:0;
  background:
    conic-gradient(from  -135deg at top 0    left   22px ,#0000 ,currentColor 1deg 90deg,#0000 0),
    conic-gradient(from  -45deg  at right 0  top    22px ,#0000 ,currentColor 1deg 90deg,#0000 0),
    conic-gradient(from   45deg  at bottom 0 right  22px ,#0000 ,currentColor 1deg 90deg,#0000 0),
    conic-gradient(from  135deg  at left  0  bottom 20px ,#0000 ,currentColor 1deg 90deg,#0000 0);
   animation: sh7 1.5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes sh7 {
   33%  {inset:-10px;transform: rotate(0deg)}
   66%  {inset:-10px;transform: rotate(90deg)}
   100% {inset:0    ;transform: rotate(90deg)}
}

.shapes-8 {
  width: 40px;
  height: 40px;
  display: grid;
  animation: sh8-0 1.5s infinite linear;
}
.shapes-8:before,
.shapes-8:after {
  content: "";
  grid-area: 1/1;
  background:#25b09b;
  clip-path: polygon(0 0%,100% 0,100% 100%);
  animation: inherit;
  animation-name: sh8-1;
}
.shapes-8:after {
  --s:-1;
}
@keyframes sh8-0 {
  66%      {transform: skewX(0deg)}
  80%,100% {transform: skewX(-45deg)}
}
@keyframes sh8-1 {
  0%   {transform:scale(var(--s,1)) translate(-0.5px,0)}
  33%  {transform:scale(var(--s,1)) translate(calc(1px - 50%),calc(1px - 50%))}
  66%  {transform:scale(var(--s,1)) translate(calc(1px - 50%),0%)}
  100% {transform:scale(var(--s,1)) translate(calc(0.5px - 50%),0%)}
}

.shapes-9 {
  width: 40px;
  height: 20px;
  background:orange;
  position: relative;
  animation: sh9-0 1.5s infinite linear;
}
.shapes-9:before,
.shapes-9:after {
   content:"";
   position: absolute;
   background:inherit; 
   bottom: 100%;
   width: 50%;
   height: 100%;
   animation: inherit;
   animation-name: sh9-1;
}
.shapes-9:before {
  left:0;
  transform-origin: bottom left;
  --s:-1;
}
.shapes-9:after {
  right:0;
  transform-origin: bottom right;
}
@keyframes sh9-0 {
   0%,10%   {transform:translateY(0%)    scaleY(1)}
   49.99%   {transform:translateY(-50%)  scaleY(1)}
   50%      {transform:translateY(-50%)  scaleY(-1)}
   90%,100% {transform:translateY(-100%) scaleY(-1)}
}
@keyframes sh9-1 {
   10%,90% {transform: rotate(0deg)}
   50%     {transform: rotate(calc(var(--s,1)*180deg))}
}

.shapes-10 {
  display: flex;
  width:50px;
  height:50px;
  animation: sh10-0 1.5s infinite linear;
}
.shapes-10:before,
.shapes-10:after {
  content: "";
  width:50%;
  background:#514b82;
  clip-path: polygon(0 0,100% 50%,0% 100%);
  animation: inherit;
  animation-name: sh10-1;
  transform-origin: bottom left;
}
.shapes-10:before {
  clip-path: polygon(0 50%,100% 0,100% 100%);
  transform-origin: bottom right;
  --s:-1;
}

@keyframes sh10-0 {
  0%,34.99% {transform: scaley(1)}
  35%,70%   {transform: scaley(-1)}
  90%,100%  {transform: scaley(-1) rotate(180deg)}
}

@keyframes sh10-1 {
  0%,10%,70%,100%{transform:translateY(-100%) rotate(calc(var(--s,1)*135deg))}
  35%            {transform:translateY(0%)    rotate(0deg)}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}

脉动款

在这里插入图片描述

<div class="pulsing-1"></div>
<div class="pulsing-2"></div>
<div class="pulsing-3"></div>
<div class="pulsing-4"></div>
<div class="pulsing-5"></div>
<div class="pulsing-6"></div>
<div class="pulsing-7"></div>
<div class="pulsing-8"></div>
<div class="pulsing-9"></div>
<div class="pulsing-10" data-c="💯"></div>

.pulsing-1 {
  width:20px;
  height:20px;
  border-radius: 50%;
  background:#000;
  box-shadow: 0 0 0 0 #0004;
  animation:pl1 1s infinite;
}
@keyframes pl1 {
    100% {box-shadow: 0 0 0 30px #0000}
}

.pulsing-2 {
  width:20px;
  height:20px;
  border-radius: 50%;
  background:#000;
  box-shadow: 0 0 0 0 #0004;
  animation:pl2 1.5s infinite linear;
  position: relative;
}
.pulsing-2:before,
.pulsing-2:after {
  content:"";
  position: absolute;
  inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 #0004;
  animation: inherit;
  animation-delay: -0.5s;
}
.pulsing-2:after {
  animation-delay: -1s;
}
@keyframes pl2 {
    100% {box-shadow: 0 0 0 40px #0000}
}

.pulsing-3 {
  width:50px;
  height:50px;
  color:#dc1818;
  background:
   radial-gradient(circle at 60% 65%, currentColor 62%, #0000 65%) top left,
   radial-gradient(circle at 40% 65%, currentColor 62%, #0000 65%) top right,
   linear-gradient(to bottom left, currentColor 42%,#0000 43%) bottom left ,
   linear-gradient(to bottom right,currentColor 42%,#0000 43%) bottom right;
  background-size:50% 50%;
  background-repeat:no-repeat;
  position:relative;
}
.pulsing-3:after {
  content:"";
  position:absolute;
  inset:0;
  background:inherit;
  opacity:0.4;
  animation:pl3 1s infinite;
}
@keyframes pl3 {
  to {transform:scale(1.8);opacity:0}
}

.pulsing-4 {
  width:60px;
  height:60px;
  position:relative;
}
.pulsing-4:before,
.pulsing-4:after {
  content:"";
  position:absolute;
  border-radius: 50%;
  inset:0;
  background:
    radial-gradient(circle 10px,#f85c00 94%,#0000),
    repeating-conic-gradient(from -30deg,#0000 0 60deg,#f85c00 61deg 120deg);
  -webkit-mask:radial-gradient(circle 15px,#000 calc(100% - 6px),#0000 calc(100% - 5px) 94%,#000);
}

.pulsing-4:after {
  animation:pl4 1s infinite;
  transform: perspective(300px) translateZ(0px)
}

@keyframes pl4 {
  to {transform:perspective(300px) translateZ(150px);opacity:0}
}



.pulsing-5 {
  width:80px;
  height:80px;
  position:relative;
}
.pulsing-5:before,
.pulsing-5:after {
  content:"";
  position:absolute;
  inset:0;
  background:#ffb940;    
  box-shadow: 0 0 0 50px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.pulsing-5:after {
  animation:pl5 1s infinite;
  transform:perspective(300px) translateZ(0px)
}

@keyframes pl5 {
  to {transform:perspective(300px) translateZ(150px);opacity:0}
}

.pulsing-6 {
  width:40px;
  height:40px;
  position:relative;
  transform:rotate(45deg);
}
.pulsing-6:before,
.pulsing-6:after {
  content:"";
  position:absolute;
  inset:0;
  border-radius: 50% 50% 0 50%;
  background:#514b82;
  -webkit-mask:radial-gradient(circle 10px at 50% 50%,#0000 94%,#000);
}

.pulsing-6:after {
  animation:pl6 1s infinite;
  transform: perspective(300px) translateZ(0px)
}

@keyframes pl6 {
  to {transform:perspective(300px) translateZ(150px);opacity:0}
}

.pulsing-7 {
  width: 108px;
  height: 60px;
  color:#269af2;
  --c:radial-gradient(farthest-side,currentColor 96%,#0000);
  background: 
    var(--c) 100% 100% /30% 60%,
    var(--c) 70%  0    /50% 100%,
    var(--c) 0    100% /36% 68%,
    var(--c) 27%  18%  /26% 40%,
    linear-gradient(currentColor 0 0) bottom/67% 58%;
  background-repeat: no-repeat;
  position: relative;
}

.pulsing-7:after {
  content:"";
  position:absolute;
  inset:0;
  background:inherit;
  opacity:0.4;
  animation:pl7 1s infinite;
}
@keyframes pl7 {
  to {transform:scale(1.8);opacity:0}
}

.pulsing-8 {
  width:65px;
  height:117px;
  position:relative;
}
.pulsing-8:before,
.pulsing-8:after {
  content:"";
  position:absolute;
  inset:0;
  background:#ff8001;    
  box-shadow: 0 0 0 50px;
  clip-path: polygon(100% 0, 23% 46%, 46% 44%, 15% 69%, 38% 67%, 0 100%, 76% 57%, 53% 58%, 88% 33%, 60% 37%);;
}

.pulsing-8:after {
  animation:pl8 1s infinite;
  transform:perspective(300px) translateZ(0px)
}

@keyframes pl8 {
  to {transform:perspective(300px) translateZ(180px);opacity:0}
}
.pulsing-9 {
  width:100px;
  height:45px;
  position:relative;
}
.pulsing-9:before,
.pulsing-9:after {
  content:"";
  position:absolute;
  inset:0;
  background:#000;    
  box-shadow: 0 0 0 50px;
  clip-path: polygon(-50px -20px,10% -12px,20% 0,calc(50% - 15px) 0,calc(50% - 10px) -20px,calc(50% - 8px) -15px,calc(50% + 8px) -15px,calc(50% + 10px) -20px,calc(50% + 15px) 0,80% 0,90% -12px,calc(100% + 50px) -20px,100% 80%,calc(100% + 10px) calc(100% + 10px),60% 100%,50% calc(100% + 15px),40% 100%,-10px calc(100% + 10px),0 80%);
}

.pulsing-9:after {
  animation:pl9 1s infinite;
  transform:perspective(300px) translateZ(0px)
}

@keyframes pl9 {
  to {transform:perspective(300px) translateZ(100px);opacity:0}
}

.pulsing-10 {
  display: grid;
  font-size: 50px;
}
.pulsing-10:before,
.pulsing-10:after {
  content:attr(data-c);
  grid-area: 1/1;
}

.pulsing-10:after {
  animation:pl10 1s infinite;
}

@keyframes pl10 {
  to {transform:scale(1.8);opacity:0}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}
accumulate_
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Loading加载动画
09-27
纯css3动画加载效果，可以方便快捷的使用，使用简单，将代码复制到项目中即可使用，当前页可以自行更改样式
加载loading动画
qq_40289557的博客
08-22 7438
提起加载（loading）效果，想必大家都不会陌生，在目前的移动端、PC端、各类app均广泛使用，使用loading动画能显著提升用户的交互体检，尤其是在页面加载速度比较的慢的情况下，loading动画的作用就更加突出了。实现一个个性化的加载动画效果，并不难，其主要原理是使用css3动画属性-animation、结合transform属性即可
css加载动画
weixin_41897680的博客
09-25 7866
前言 感觉css动画真的很有意思，奈何太菜，想不出来。下面的这些例子都是从网上找的，我自己手敲的。教程来源也会进行标注。 加载动画 动画1 教程：点此查看 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）
赏樱看雪撸代码
07-11 1万+
CSS3实现多种load加载效果，纯CSS3实现多种加载中效果，纯CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，animation与transform的灵活应用。
前端页面加载Loading动画
pscool的博客
03-16 1804
在vue中，可以直接写在index.html的id为app的div里面，因为后面vue加载完成后，会替换掉里面的元素。
常用loading加载效果集及vue实现加载动画
pscool的博客
03-28 2957
思路：只需要先把loading的盒子摆在正中间，然后，里面的每个item都使用绝对定位，并且水平垂直居中，然后先旋转，再位移，就可以呈现一个环状，接着指定动画，并设置延迟即可。（其实，下边并不需要给loading指定大小，这样就不用设置上下左右都是0，margin是auto了） <style lang="scss"> body { margin: 0; } .modal { background: #202020; hei
HTML5 Canvas 3D跳动Loading加载动画-可调节参数
11-09
这是一款纯CSS3漩涡样式的Loading加载动画和CSS3发光线条旋转Loading加载动画，支持动态调节动画参数。
纯文本Loading加载动画特效
06-24
纯文本Loading加载动画特效是一款使用纯文本制作，为内联样式，不同的字体下显示的效果会略有不同。
纯CSS3方块翻转效果的Loading加载动画
04-16
解压密码：RJ4587 关于Loading动画，我们之前已经分享过很多了，大部分都是纯CSS3实现的，比如这款纯CSS3实现的六边形加载动画就非常不错，还有更早以前分享的纯CSS3发光圆环Loading加载动画也很酷。这次给大家带来...
css实现多个loading动画效果
温情
12-13 2560
在开发中，为了提高用户体验，通常在加载数据的时候会给一个。根据序号查看代码，尾部有整合代码。提示，这里分享几个简单的。
纯前端css实现酷炫loading动画
qq_45457134的博客
07-06 815
纯前端css实现酷炫loading动画
10种 loading加载动画效果
最新发布
qq_41988669的博客
01-29 941
第一种 效果图： <template> <view class="load-box"> <view class="loading"></view> </view> </template> <script> export default { name: 'loading', data() { return {
使用loading动画让你的条件渲染页面更高级
知识虔诚的信徒，探索所有未知是信徒毕生的信仰
02-20 3952
如何让你的条件渲染和页面跳转更丝滑、更高级。也许只需添加一个loading动画就能做到！
编写一个简单的加载（loading）动画
m0_59382352的博客
04-23 202
【代码】编写一个简单的加载（loading）动画。
整理一些好看的loading动画
热门推荐
张豆豆的博客
08-20 1万+
1.AVLoadingIndicatorView 简单实用的加载动画 2.LoadingDrawable 3.LoadingView 4.Android-SpinKit 5.GifLoadingView 这个有好多好看的动画 6.HouseLoading 一个很好看的loading动画 7.Loading 有三个，我比较喜欢这个BookLoadi...
用box与grid实现九宫格_CSS3 Grid布局实现Loading动画效果
weixin_39653622的博客
11-23 233
点击右上方红色按钮关注“web秀”，让你真正秀起来前言以前说页面是动态，基本都是说数据是从数据库查询的，不是写死在html代码里面的。现在的说页面动态，一般会问：你是说数据，还是效果动态？CSS3 Grid布局实现Loading动画效果好的前端动画效果，能给用户带来非常舒适的体验效果，更甚者，有用户觉的你这个动画效果非常nice，反复操作，就为看你这个动画。停留时间，预览量上了，带来的收益也不是一...
请务必收下这10+个加载特效
frontend_frank的博客
12-17 2226
☀️ 前言相信大家经常会使用到加载动画，但是大部分组件库的加载样式都太简洁了????。这次给前端工友们收集了10+个高逼格加载动画效果！！复制就能直接用！！????⛷️ 来吧展示1、一个"滚动"加载跳...
css动画----loading加载动画
m0_47531829的博客
03-22 7085
今天做项目的时候，一个loading加载动画，让我搞了很长时间，后来ui给了看了一个loading加载源码，仿照着源码，把样式改了一下，成功了，并且通过ui给的链接，发现里面有很多优秀的源码可以借鉴，这是加载动画的源码，loading加载动画， 这是自己封装的html部分 {/* 登录时loading加载动画 */} <div className="login-loader-wrap" > <div className="loader"></div>
CSS - 实现Loading加载动画
CodingmanNAN的博客
01-31 5803
用CSS都用实现一个loading的加载动画
css loading加载动画
08-26
CSS loading加载动画可以使用单个元素来完成。这意味着你只需要一个div元素，而不需要复制大量代码。你可以向这个div元素中添加一个类，以启动loading效果。 在选择加载提示动画时，你可以考虑使用一些经典的款式，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值