css3仿支付宝成功动画 |css 第三个元素

如果你对这个支付宝成功动画感兴趣，并希望在自己的网站中使用类似的效果，那么CSS3提供的一些特性正好可以帮助你实现这一目标。

.success{
width: 60px;
height: 60px;
border-radius: 50%;
margin: auto;
background-color: #43A047;
position: relative;
animation: rotate 1s linear infinite forwards;
}
.success:before{
content: "";
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 4px 4px 0;
top: 25px;
left: 12px;
transform: rotate(45deg);
width: 18px;
height: 10px;
animation: line-anim 0.5s ease-in-out 0.7s forwards;
}
.success:after{
content: "";
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 15px;
left: 23px;
transform: rotate(45deg);
width: 10px;
height: 6px;
animation: line-anim 0.5s ease-in-out 0.9s forwards;
}
@keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
@keyframes line-anim{
from{
opacity: 0;
transform: translateX(0) translateY(0) rotate(0);
}
to{
opacity: 1;
transform: translateX(6px) translateY(6px) rotate(45deg);
}
}

以上是实现支付宝成功动画的CSS3代码示例，通过使用伪元素:before和:after分别表示小圆形和小勾勾的样式，使用动画实现小圆形的旋转和小勾勾的绘制。同时，为了让动画效果更加流畅，大家还可以使用animation属性指定不同的时间和速率。

通过以上的简单示例，大家可以看到CSS3提供的强大功能可以帮助大家实现各种复杂的效果，无论是在Web设计还是开发中，CSS3都是值得大家深入学习和运用的。