服务器之家
您的位置： 首页 编程语言 css

纯CSS实现三个点旋转的Loading特效 8/117

100人浏览   2024-11-13 09:34:31

当用户在等待页面加载时，一款好看的Loading特效可以有效提高用户对网站的印象，从而提升用户满意度。今天，我为大家介绍一款纯CSS实现的多点旋转Loading特效。

这个Loading特效由3个点组成，点会围绕一个中心点不断旋转，形成一个炫酷的旋转效果。同时，每个点的大小和颜色也不断变换，增加了动画的层次感和视觉效果。

这款特效代码简单，使用方便，只需要少量的CSS代码即可在你的网站或者APP中应用，为用户带来更好的体验。

如果你正在寻找一款美观、实用的Loading特效，那么不妨来试试这个纯CSS实现的多点旋转Loading特效。让它为你的网站增添一份炫酷和动感吧！


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

<style>
.loading {
  margin: 20px;
  position: relative;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: #000;

  animation: ball-rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
  animation-fill-mode: both;
}

.loading:before,
.loading:after {
  position: absolute;
  width: 15px;
  height: 15px;
  margin: 2px;
  content: "";
  opacity: 0.8;
  border-radius: 100%;
  background-color: #000;
}

.loading:before {
  top: 0;
  left: -28px;
}

.loading:after {
  top: 0;
  left: 25px;
}

@keyframes ball-rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(0.6);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}
</style>

相关推荐