[分享]css3按钮加载动画

CSS3中提供了很多种按钮加载动画效果，这些效果可以为网页增添一些生动感和交互性。下面我们将展示一些常用的CSS3按钮加载动画效果。.button { display: inlineblock; pa...

CSS3中提供了很多种按钮加载动画效果，这些效果可以为网页增添一些生动感和交互性。下面我们将展示一些常用的CSS3按钮加载动画效果。

.button {
  display: inline-block;
  padding: 10px 20px;
  background: #007bff;
  color: #fff;
  border-radius: 5px;
}

/* 原始按钮效果 */
.button-primary.loading {
  background: #007bff;
}

/* 环形加载动画 */
.button-primary.loading:after {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-left: -5px;
  position: absolute;
  content: "";
  border: 2px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: spin 1s linear infinite;
}

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

  to {
    transform: rotate(360deg);
  }
}

/* 方形加载动画 */
.button-primary.loading:before {
  width: 0;
  height: 0;
  border: 3px solid #fff;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0;
  }
  25% {
    width: 0px;
    height: 50px;
    opacity: 0.5;
  }
  50% {
    width: 50px;
    height: 50px;
    opacity: 1;
  }
  75% {
    width: 50px;
    height: 0px;
    opacity: 0.5;
  }
  100% {
    width: 0px;
    height: 0px;
    opacity: 0;
  }
}

/* 线条加载动画 */
.button-primary.loading:after {
  content: ';
  display: block;
  width: 0;
  height: 2px;
  position: absolute;
  background: #fff;
  animation: loading 2s linear infinite;
}

@keyframes loading {
  0% {
    left: -100%;
    width: 100%;
  }
  50% {
    left: 100%;
    width: 0;
  }
  100% {
    left: 100%;
    width: 0;
  }
} 

利用CSS3按钮加载动画效果，使得用户在等待页面加载时能够有更好的体验，避免了用户过度焦虑的情况，提升了用户满意度。我们可以根据需要选择不同的按钮加载动画效果。以上代码只是给大家做参考，可以根据自己的需求进行修改和优化。