项目中的网页需要给按钮添加动画效果,只需要如下css文件即可:

/**

* 按钮的点击动画效果,2018年1月12日09:36:48

**/

input.btn {

display: inline-block;

/* margin: 15px 15px 0;

padding: .6em 1.1em; */

font-size: 12px;

font-size: 1.625rem;

text-decoration: none;

outline: none;

color: #fff;

background-color: #fe4365;

border-radius: 3px;

-webkit-background-clip: padding-box;

background-clip: padding-box;

-webkit-box-shadow: 0 0 0 -2px #cff09e, 0 0 0 -1px #fe4365;

box-shadow: 0 0 0 -2px #cff09e, 0 0 0 -1px #fe4365;

border: none;

-webkit-transition: -webkit-box-shadow .3s;

transition: box-shadow .3s;

}

input.btn:hover, input.btn:focus {

-webkit-box-shadow: 0 0 0 2px #cff09e, 0 0 0 4px #ff0364;

box-shadow: 0 0 0 0.5px rgb(1, 190, 188), 0 0 0 0.5px #19C1C0;

-webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);

transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);

-webkit-animation: gelatine 0.5s 1;

animation: gelatine 0.5s 1;

/* -webkit-box-shadow: 0 0 0 2px #cff09e, 0 0 0 4px #ff0364;

box-shadow: 0 0 0 2px #cff09e, 0 0 0 4px #ff0364;

-webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);

transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);

-webkit-animation: gelatine 0.5s 1;

animation: gelatine 0.5s 1; */

}

input.btn:active {

background: #4ecdc4;

-webkit-transition-duration: 0;

transition-duration: 0;

-webkit-box-shadow: 0 0 0 2px #cff09e, 0 0 0 4px #3ac7bd;

box-shadow: 0 0 0 2px #cff09e, 0 0 0 4px #3ac7bd;

}

/**

* $keyframes \ gelatine

**/

@keyframes gelatine {

from, to {

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

25% {

-webkit-transform: scale(0.9, 1.05);

transform: scale(0.9, 1.1);

}

50% {

-webkit-transform: scale(1.1, 0.9);

transform: scale(1.1, 0.9);

}

75% {

-webkit-transform: scale(0.95, 1.05);

transform: scale(0.95, 1.05);

}

from, to {

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

25% {

-webkit-transform: scale(0.98, 1.01);

transform: scale(0.98, 1.01);

}

50% {

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

75% {

-webkit-transform: scale(0.98, 1.01);

transform: scale(0.98, 1.01);

}

}

@-webkit-keyframes gelatine {

from, to {

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

25% {

-webkit-transform: scale(0.9, 1.1);

transform: scale(0.9, 1.1);

}

50% {

-webkit-transform: scale(1.1, 0.9);

transform: scale(1.1, 0.9);

}

75% {

-webkit-transform: scale(0.95, 1.05);

transform: scale(0.95, 1.05);

}

from, to {

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

25% {

-webkit-transform: scale(0.98, 1.01);

transform: scale(0.98, 1.01);

}

50% {

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

75% {

-webkit-transform: scale(0.98, 1.01);

transform: scale(0.98, 1.01);

}

}   2.在界面上使用方式如下: