在日常前端开发中肯定都遇到过不少有按钮交互的地方，但你有用到什么炫酷的交互效果吗？日常前端开发中想必最多的就是点击按钮背景文字变色，阴影，按钮按下，加载中之类的效果，相对都比较平平无奇，都是一些按部就班的效果。一个好的前端页面在实现设计图的同时，如果也有极强的与用户交互效果，那么给用户带来的体验是极好的。近期整理了一组相对炫酷前端按钮交互动画，今天分享给大家。
今天分享的主要内容来源于 [Aaron Iker]，有兴趣的可以去看看原设计。为方便国内访问，本文有稍加整理修改，涉及到的代码较多，文中只展示核心部分代码，完整代码可在文末码上掘金看源码。
特别说明，因涉及细节的动画比较多，所以导致 CSS 的代码量会比较高，部分效果依赖于 gsap，animejs，three 等动画库，如需线上环境使用，请留意整体性能影响，主要是按钮交互效果的参考与借鉴。
收藏按钮
此交互效果适用于用户收藏或是喜欢某个内容的时候。观察下图，我们可以将动画拆分为以下几个步骤，这里的交互效果主要是星星的动画。
- 星星在交互过程中有旋转
- 有两段上下移动的过程
- 星星中途有变化为圆形
- 从第二段跳出星星改变了颜色
- 此时星星的表情也变更为嘴角上扬
- 星星跳出过程中底部增加了一个椭圆的从无到有再到无的过程
结语
今天整体的按钮交互分享就结束了，相信看到这些效果会给在开发中带来一定的启发吧，下次再有老板或业务方说你这个效果还不够炫的时候，拿出这份效果，惊呆掉他们的下巴。但是日常前端开发都是还原设计稿，设计稿不一定如此，但是在适合的场景可以给他们参考，好的交互效果给用户的感觉是很棒的，我们能够实现更好的交互效果给到用户也是很棒的感觉，耶～
参考官网：