網頁設計中，動畫效果是非常重要的，它可以讓網頁更加生動、有趣，也可以提高用戶的體驗感。

基礎圓圈旋轉動畫

<style type="text/css">
.circle-loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}
</style>
<div class="circle-loader"></div>

圓圈旋轉帶有漸變的動畫

<style type="text/css">
.circle-loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
        border-top-color: #f3f3f3;
    }

    50% {
        transform: rotate(180deg);
        border-top-color: #3498db;
    }

    100% {
        border-top-color: #f3f3f3;
        transform: rotate(360deg);
    }
}
</style>
<div class="circle-loader"></div>

圓圈旋轉帶有陰影的動畫

<style type="text/css">
.circle-loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  box-shadow: 0 0 10px #3498db;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
<div class="circle-loader"></div>

圓圈旋轉帶有縮放的動畫

<style type="text/css">
.circle-loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(0.8);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
</style>
<div class="circle-loader"></div>

圓圈旋轉帶有彈跳的動畫

<style type="text/css">
.circle-loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(90deg) translateY(-20px);
  }
  50% {
    transform: rotate(180deg) translateY(0);
  }
  75% {
    transform: rotate(270deg) translateY(-20px);
  }
  100% {
    transform: rotate(360deg) translateY(0);
  }
}
</style>
<div class="circle-loader"></div>

圓圈旋轉帶有圖片的動畫

<style type="text/css">
.circle-loader {
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  position: relative;
}

.circle-loader:before {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 20px;
  height: 20px;
  background-image: url("/statics/img.png");
  background-size: cover;
  border-radius: 50%;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
<div class="circle-loader"></div>

希望本文能夠對您有所幫助，感謝您的閱讀！

人人為我，我為人人，謝謝您的瀏覽，我們一起加油吧。

文簡介

在網頁設計中，Loading特效是非常重要的元素之一。它可以讓用戶在等待網頁內容加載時不感到無聊或厭煩。本文將介紹如何使用純CSS實現一個簡單的Loading特效，該特效由3個圓圈從上往下掉落構成。

HTML結構

首先，我們需要使用HTML創建3個圓圈?？梢允褂胐iv元素，并使用CSS樣式將其轉換為圓形。如下所示：

<div class="loading">
    <div></div>
    <div></div>
    <div></div>
</div>

動畫設置

接下來，我們需要使用CSS樣式來控制圓圈的位置和動畫。我們將使用CSS的@keyframes規則來定義一個名為“ball-fall”的動畫，該動畫將使圓圈從上往下掉落。代碼如下：

@keyframes ball-fall {
  0% {
    opacity: 0;
    transform: translateY(-145%);
  }

  10% {
    opacity: 0.5;
  }

  20% {
    opacity: 1;
    transform: translateY(0);
  }

  80% {
    opacity: 1;
    transform: translateY(0);
  }

  90% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
    transform: translateY(145%);
  }
}

應用動畫，并設置延時

接下來，我們將應用這個動畫到我們的圓圈上。我們可以使用CSS選擇器來選擇所有的圓圈，并將動畫“ball-fall”應用到它們身上。代碼如下：

.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 54px;
  height: 18px;
}

.loading > div {
  width: 10px;
  height: 10px;
  margin: 4px;
  border-radius: 100%;
  opacity: 0;
  animation: ball-fall 1s ease-in-out infinite;
}

.loading > div:nth-child(1) {
  animation-delay: -200ms;
}

.loading > div:nth-child(2) {
  animation-delay: -100ms;
}

.loading > div:nth-child(3) {
  animation-delay: 0ms;
}

在上面的代碼中，我們使用了“animation”屬性來應用動畫“ball-fall”，并使用了“animation-delay”屬性來分別延遲每個圓圈的動畫開始時間，以達到“依次掉落”的效果。

額外的潤色

最后，我們可以為Loading特效添加一些樣式，使其看起來更加美觀。例如，我們可以添加一個背景色和一些內邊距來增加可讀性。代碼如下：

body {
  background-color: #F3F3F3;
  padding: 20px;
}

通過以上步驟，我們就可以實現一個簡單的Loading特效，由3個圓圈從上往下掉落構成。這個特效非常簡單易懂，同時也能有效地提高用戶等待時的體驗感。

完整代碼

今，隨著互聯網的不斷發展，Loading特效已經成為了一個網頁設計中不可或缺的部分。一個好的Loading特效不僅可以提高用戶的等待耐心，還能為網頁增添更多的時尚和吸引力。本文將介紹一種使用HTML和CSS實現圓圈轉動的Loading特效的方法，幫助你為你的網頁應用程序添加一個簡單而又有效的Loading特效。

在本文中，我們將向你介紹如何使用HTML和CSS來實現圓圈轉動的Loading特效。我們將提供詳細的步驟和代碼示例，幫助你快速掌握這個特效的實現方法。

無論你是一個網頁設計師還是開發人員，本文都會為你提供非常有價值的信息和技巧。通過學習如何使用HTML和CSS實現圓圈轉動的Loading特效，你將能夠為你的網頁應用程序添加一個簡單而又有效的Loading特效，從而提高你的應用程序的用戶體驗和用戶滿意度，吸引更多的用戶和客戶。