? ?項目中的網頁需要給按鈕添加動畫效果,只需要如下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.在界面上使用方式如下:

<div id="btn"> <input class="btn" style="cursor:pointer;" id="loginBtn" type="submit" value="登錄" ng-click="loginBtn()" /></div>
? ?主要是使用關鍵幀動畫,擴大div的scale,如果你覺得動畫不夠大動靜,可以設置scale的每個關鍵幀的大小.

總結

以上是生活随笔為你收集整理的css3 实现按钮点击动画效果(加工)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。