css3 实现按钮点击动画效果(加工)

项目中的网页需要给按钮添加动画效果,只需要如下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 实现按钮点击动画效果(加工)相关推荐

html如何给按钮加动态效果,css3 实现按钮点击动画效果(加工)
项目中的网页需要给按钮添加动画效果,只需要如下css文件即可: /** * 按钮的点击动画效果,2018年1月12日09:36:48 **/ input.btn { display: inline-b ...
android 按钮点击动画效果_如何用纯css打造类materialUI的按钮点击动画并封装成react组件...
作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vu ...
html微信拆红包动画特效,实例详解用React加CSS3实现微信拆红包动画效果
本文主要介绍了用React加CSS3实现微信拆红包动画效果,微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生,这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果,希望能 ...
html仿微信拆红包效果旋转,利用React加CSS3实现微信拆红包动画效果实例（代码）...
本篇文章主要介绍了利用React加CSS3实现微信拆红包动画效果实例(代码),具有一定的参考价值,感兴趣的小伙伴们可以参考一下. 微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生, ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
html点击波,Material Design风格按钮点击波动画效果
这是一款Material Design风格按钮点击波动画效果.该按钮设计在用户点击按钮时,按钮上会产生各种流光动画效果,非常炫酷. 使用方法在页面中引入style.css文件. HTML结构该Ma ...
Qt5学习模仿qq音乐播放器样式（2）——点击动画效果+歌词颜色变换展示
拖的太久,主要再上一篇文章中,新学习了相关知识,做了右键菜单,点击按钮动画切换窗口和播放时歌词颜色显示当前播放位置. 主要为了实现功能的展示,所以很多文件读取都直接采用了本地文件这种比较low的方式. ...
CSS3图片上下移动的动画效果
CSS3图片上下移动的动画效果开发工具与关键技术:Adobe Dreamweaver CC 2018 作者:昨夜星辰撰写时间:2019年1月17日下面我们使用Adobe Dreamweaver ...
c语言实现图片过渡效果飞入,用css3实现转换过渡和动画效果
为什么要用css动画替换js动画导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...

css3 实现按钮点击动画效果(加工)

css3 实现按钮点击动画效果(加工)相关推荐

最新文章

热门文章