.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的淡入淡出及圆角动画等效果