CSS加载动画旋转的圆圈多种示例初探

网页设计中，动画效果是非常重要的，它可以让网页更加生动、有趣，也可以提高用户的体验感。

基础圆圈旋转动画

<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个圆圈。可以使用div元素，并使用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特效，从而提高你的应用程序的用户体验和用户满意度，吸引更多的用户和客户。

在线咨询

上一篇：亚马逊测试“淘宝留评方法”：一键留下星级评分
下一篇：青雀移动张翔：HTML5正在通过技术内容重构移动互联

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商