css成功效果动画，纯css实现success动画body,html {
width:100%;
height:100%;
box-sizing:border-box;
}
* {
margin:0;
padding:0;
box-sizing:border-box;
}
.animate-container {
width:100px;
height:100px;
border:5px solid rgb(165,220,134);
border-radius:50%;
margin:50px auto 20px;
position:relative;
}
.animate-container .sa-line {
height:5px;
background-color:rgb(165,220,134);
display:block;
border-radius:2px;
position:absolute;
z-index:101;
}
.animate-container .sa-tip {
width:25px;
left:18px;
top:47px;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
animation:animationSuccessTip 0.75s;
-
webkit-animation:animationSuccessTip 0.75s; }
.animate-container .sa-long {
width:47px;
right:12px;
top:40px;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
animation:animationSuccessLong 0.75s;
-webkit-animation:animationSuccessLong 0.75s; }
.animate-container .animate-before {
position:absolute;
overflow:hidden;
z-index:100;
left:-10px;
top:10px;
width:60px;
height:120px;
background:rgba(255,255,255,1);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.animate-container .animate-before .circle { position:absolute;
left:16px;
top:10px;
width:100px;
height:100px;
border:5px solid rgba(165,220,134,0.5);
border-radius:50%;
}
.animate-container:after {
content:'';
position:absolute;
z-index:99;
left:41px;
top:-11px;
width:60px;
height:120px;
background:rgba(255,255,255,0.5); -webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg); transform:rotate(-45deg);
transform-origin:0px 60px; animation:rotateSelf 0.75s;
-webkit-animation:rotateSelf 0.75s; }
@keyframes rotateSelf {
from {
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg); transform:rotate(-45deg);
}
to {
-webkit-transform:rotate(-405deg); -moz-transform:rotate(-405deg);
-
ms-transform:rotate(-405deg);
-o-transform:rotate(-405deg); transform:rotate(-405deg);
}
}@-webkit-keyframes rotateSelf /*Safari and Chrome*/ { from {
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
to {
-
webkit-transform:rotate(-405deg);
-moz-transform:rotate(-405deg);
-ms-transform:rotate(-405deg);
-o-transform:rotate(-405deg);
transform:rotate(-405deg);
}
}@keyframes animationSuccessLong {
0% {
width:0;
right:30px;
top:40px;
}
65% {box sizing
width:0;
right:45px;
top:42px;
}
84% {
width:55px;
right:0px;
top:37px;
}
100% {
width:47px;
right:12px;
top:40px;
}
}@-webkit-keyframes animationSuccessLong { 0% {
width:0;
right:46px;
top:56px;
}
65% {
width:0;
right:53px;
top:56px;
}
84% {
width:55px;
right:0px;
top:37px;
}
100% {
width:47px;
right:12px;
top:40px;
}
}@keyframes animationSuccessTip {
0% {
width:0;
left:8px;
top:8px;
}
54% {
width:0;
left:8px;
top:8px;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。