操作成功提示

Html

Css

Js

恭喜您操作成功！

点我看效果哦

.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); } }

function test(){ $("#test1").fadeToggle(3000); $("#test1").addClass("bounceinDown"); $("#test1").fadeToggle(3000); }

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

在开发中经常遇到的操作提示，如成功后的提示，失败后的提示，或者验证提示信息，都可使用此效果，里面又div的隐藏，jquery的淡入淡出及圆角动画等效果