[分享]css3成功动画特效

CSS3是一种用于制作网页的样式表语言，它可以通过添加不同的特效使网页变得更加生动有趣。其中成功动画特效是使用最为广泛的一种。.successanimation { width: 50px; heig...

CSS3是一种用于制作网页的样式表语言，它可以通过添加不同的特效使网页变得更加生动有趣。其中成功动画特效是使用最为广泛的一种。

.success-animation {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: green;
  position: relative;
  animation: success 0.5s ease-in-out forwards;
}

.success-animation:before {
  content: "";
  width: 20px;
  height: 40px;
  border: 3px solid white;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  position: absolute;
  bottom: 0;
  left: 14px;
  animation: line 0.5s ease-in-out 0.25s forwards;
}

.success-animation:after {
  content: "";
  width: 30px;
  height: 10px;
  border: 3px solid white;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  position: absolute;
  bottom: 14px;
  left: 6px;
  animation: line 0.5s ease-in-out 0.25s forwards;
}

@keyframes success {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes line {
  0% {
    width: 0;
  }
  100% {
    width: 30px;
  }
} 

上述代码展示了一个实现成功动画特效的CSS3代码。其中主要使用了animation属性以及keyframes关键字来实现动画的运动效果。 成功动画特效显示了一个绿色的圆形，圆形中间有一条白色的斜线和一个小白色矩形。通过scale动画将圆形放大，同时使用line动画将白色的斜线和矩形数值从0变化到正常展示。这样就实现了一个生动有趣的成功动画特效。