旋转动画款

旋转动画款动画效果演示

HTML代码

<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>

CSS代码

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