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

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

操作成功提示

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

0