项目中的网页需要给按钮添加动画效果,只需要如下css文件即可:
/*** 按钮的点击动画效果,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.在界面上使用方式如下:
<div id="btn"><input class="btn" style="cursor:pointer;" id="loginBtn" type="submit" value="登录" ng-click="loginBtn()" /></div>
主要是使用关键帧动画,扩大div的scale,如果你觉得动画不够大动静,可以设置scale的每个关键帧的大小.
