纯css实现10种加载中动画

这一段是纯css实现的10种动画效果。每个.spinner类定义了不同的样式属性，从.spinner-1到.spinner-10，每个都有不同的外观和动画效果。

这些动画可以用于网页中的加载中或其他需要显示进度或等待状态的场景。它们以不同的方式使用边框、背景和渐变来创建有吸引力的加载等待效果。

以下是10种动画的实现思路原理和源码

.spinner-1：这是一个简单的圆形边框，它旋转一半就会停止旋转。动画通过"transform"和"@keyframes"属性实现。
.spinner-2：它也是一个圆形边框，但这次使用了两种颜色的边框来制造旋转效果。动画通过"transform"和"@keyframes"属性实现。
** .spinner-3**：它具有令人惊叹的复杂度，使用了多重渐变和蒙版来制造出旋转的效果。该元素呈圆形，并在旋转时显示出"消失"的效果。动画通过"transform"和"@keyframes"属性实现。
.spinner-4：它是由多个重复的渐变组成，一个用于背景，一个用于蒙版遮盖物。它包含一个带有轮廓的圆形，并且旋转时边框似乎跳跃起来。动画通过"transform"和"@keyframes"属性实现。
.spinner-5：它使用圆形边框和蒙版遮盖物来制造出旋转的效果，类似于第三个样式。但这次，整体颜色更暗，而边框的颜色则较为明亮。动画通过"transform"和"@keyframes"属性实现。
** .spinner-6**：它是一个圆形包裹器，具有一种充满纹理和深度感的效果。它还包含一个"钻石"形遮盖物，该遮盖物在旋转时移动。动画通过"transform"和"@keyframes"属性实现。
.spinner-7：它是一个带有四个渐变颜色组成的圆形，渐变颜色沿边框旋转。动画通过"transform"和"@keyframes"属性实现。
** .spinner-8**：它由多个重复的渐变组成，其中一个用于背景，另一个用于蒙版遮盖物。该样式还包括一个从中心穿过的锯齿形渐变。动画通过"transform"和"@keyframes"属性实现。
.spinner-9：它是一个具有圆形边框和平面背景的简单样式，边框旋转时呈现出跳跃的效果。动画通过"transform"和"@keyframes"属性实现。
.spinner-10：它是一个具有锯齿状边框和斜线背景的样式。边框和背景都在旋转时转动，给人一种有质感的效果。动画通过"transform"和"@keyframes"属性实现。

xml 复制代码

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

<script>
import data from "./data.json";

</script>

<style lang="scss" scoped>
.spinner-1 {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid;
  border-color: #000 #0000;
  animation: s1 1s infinite;
}
@keyframes s1 {to{transform: rotate(.5turn)}}

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

.spinner-3 {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #25b09b;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: s3 1s infinite linear;
}
@keyframes s3 {to{transform: rotate(1turn)}}

.spinner-4 {
  width: 50px;
  --b: 8px; /* the border thickness */
  aspect-ratio: 1;
  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% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  animation:s4 1s infinite steps(10);
}
@keyframes s4 {to{transform: rotate(1turn)}}

.spinner-5 {
  width: 50px;
  --b: 8px; /* the border thickness */
  aspect-ratio: 1;
  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% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  animation: s5 1s infinite;
}
@keyframes s5 {to{transform: rotate(.5turn)}}

.spinner-6 {
  width: 50px;
  aspect-ratio: 1;
  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;
  aspect-ratio: 1;
  --_c: radial-gradient(farthest-side,#25b09b 92%,#0000);
  background: 
    var(--_c) top,
    var(--_c) left,
    var(--_c) right,
    var(--_c) bottom;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation: s7 1s infinite;
}
@keyframes s7 {to{transform: rotate(.5turn)}}

.spinner-8 {
  width: 50px;
  aspect-ratio: 1;
  color: #f03355;
  --_c: no-repeat 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,
    conic-gradient(from 90deg at 4px 4px,#0000 90deg,currentColor 0)
    -4px -4px/calc(50% + 2px) calc(50% + 2px);
  animation: s8 1s infinite linear;
}
@keyframes s8 {to{transform: rotate(.5turn)}}

.spinner-9 {
  width: 50px;
  aspect-ratio: 1;
  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;
  aspect-ratio: 1;
  color: #854f1d;
  border-radius: 50%;
  display: grid;
  background: 
    conic-gradient(from 90deg at 4px 4px,#0000 90deg,currentColor 0)
    -4px -4px/calc(50% + 2px) calc(50% + 2px),
    radial-gradient(farthest-side,currentColor 6px,#0000 7px calc(100% - 6px),currentColor calc(100% - 5px)) no-repeat;
  animation: s10 2s infinite linear;
  position: relative;
}
.spinner-10:before {
  content: "";
  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;
}
</style>