我試圖得到一個(gè)用CSS實(shí)現(xiàn)的非常簡單的加載動(dòng)畫。

.spinner
{
    border: 5px solid red;
    border-top: 5px solid green;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 3s linear infinite;
}
@keyframes spin
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

123

<div class="spinner">abc</div>

987

您可以使用::before在文本周圍添加微調(diào)器。 下面是一個(gè)示例代碼

.spinner
    {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background-color: aliceblue;
            border-radius: 50%;
    }

   

.spinner::before {
            content: "";
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            z-index: -100;
            bottom: -10px;
            background: rgb(82,210,56);
            background: linear-gradient(15deg, rgba(82,210,56,1) 0%, rgba(135,107,184,1) 11%, rgba(106,190,96,1) 43%, rgba(209,35,35,1) 79%, rgba(217,186,173,1) 100%);
            border-radius: 50%;
            transform-origin: center center;
            animation: spin 2s linear infinite;
    }
    @keyframes spin {
           0% {
              transform: rotate(0);
           }
           100% {
              transform: rotate(360deg);
           }
    }

<div class="spinner">
asdasd
<br>
asdasd
</div>

您可以使用包裝器元素將您的元素放置在其中。

.spinner {
  right: 0;
  border: 5px solid red;
  border-top: 5px solid green;
  border-radius: 50%;
  animation: spin 3s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner-container {
  position: relative;
  width: 35px;
  height: 35px;
}

.spinner-container p {
  display: flex;
  justify-content: center;
  align-items: center;
}

.absolute {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

123

<div class="spinner-container">
  <div class="spinner absolute"></div>
  <p class="absolute">abc</p>
</div>

987