? ?項(xiàng)目中的網(wǎng)頁(yè)需要給按鈕添加動(dòng)畫(huà)效果,只需要如下css文件即可:

/*** 按鈕的點(diǎn)擊動(dòng)畫(huà)效果,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>
? ?主要是使用關(guān)鍵幀動(dòng)畫(huà),擴(kuò)大div的scale,如果你覺(jué)得動(dòng)畫(huà)不夠大動(dòng)靜,可以設(shè)置scale的每個(gè)關(guān)鍵幀的大小.

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。