@charset "utf-8";
/*点击按钮背景扩散动效*/
.zspread{overflow:hidden;position:relative;}
.zspread:after {content: "";display: block;position: absolute;width: 100%;height: 100%;top: 0;left: 0;pointer-events: none;background-image: radial-gradient(circle, #cccccc 10%, transparent 10.01%);background-repeat: no-repeat;background-position: 50%;transform: scale(10, 10);opacity: 0;transition: transform .3s, opacity .5s;}
.zspread:active:after {transform: scale(0, 0);opacity: .3;transition: 0s;}

/*鼠标移入旋转*/
.zr360{-webkit-transition: 0.4s;-webkit-transition: -webkit-transform 0.4s ease-out;transition: transform 0.4s ease-out;-moz-transition: -moz-transform 0.4s ease-out;}
.zr360:hover{transform: rotateZ(360deg);-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);}

/*鼠标移入上移动margin-top:*/
.zt{position:relative;transition:margin-top 0.3s ease 0s;}
.zt:hover{margin-top:-2px;transition:margin-top 0.3s ease 0s;}

/*鼠标移入上移动top*/
.zt2{position:relative;transition:top 0.3s ease 0s;}
.zt2:hover{top:-2px;transition:top 0.3s ease 0s;}

/*鼠标移入内阴影*/
.zshadow:hover{box-shadow: inset 0 0 38px rgba(0,0,0,.05);transition: all .15s ease}

/*跳动悬浮*/
.zjump{-webkit-animation: zjump 2s ease-in-out infinite;animation: zjump  2s ease-in-out infinite;}
.zjump:hover{animation-play-state: paused;}
@keyframes zjump{0%{margin-top: -5px;} 50%{margin-top: 0;} 100%{margin-top: -5px;}}

/*绝对定位下：上下微悬浮*/
/* .topDown{-webkit-animation: upDown 6s ease-in-out infinite;animation: upDown  6s ease-in-out infinite;} */
@keyframes upDown{0%{transform: translateY(5px);} 25%{transform: translateY(0px);} 50%{transform: translateY(5px);} 75%{transform: translateY(0px);} 100%{transform: translateY(5px);}}