.div1 {
position:relative;
margin: 0 auto;
display:none;
width:200px;
height:200px;
border:2px solid rgba(165,220,134,0.2);
border-radius:50%;
text-align:center;
line-height:200px;
font-size:18px;
font-family:"微软雅黑";
}
.bounceinDown {
-webkit-animation:bounceinDownAnimate 1s ease .5s infinite;
animation:bounceinDownAnimate 5s ease .5s infinite;
}
@-webkit-keyframes bounceinDownAnimate {
0% {
-webkit-transform:translateY(-200px);
}
30% {
-webkit-transform:translateY(30px);
}
70% {
-webkit-transform:translateY(-10px);
}
100% {
-webkit-transform:translateY(0px);
}
}
在开发中经常遇到的操作提示,如成功后的提示,失败后的提示,或者验证提示信息,都可使用此效果,里面又div的隐藏,jquery的淡入淡出及圆角动画等效果