起因
日前网上冲浪时看到一个非常Q弹可爱的按钮效果，并且是使用纯CSS实现的，抓紧时间分享出来和大家一起学习一下。
第一个问题，CSS如何记录点击的状态
平时我们的点击状态都是要依赖于JS参与，监听一个onClick事件后记录点击的下标然后刷新状态更新样式名，我们这里使用CSS中的input标签配合label以及:checked来完成。
可点击查看效果。
第二个问题，CSS如何判断方向
再次感叹一下CSS的灵活多变，很多看起来不可思议的事件其实只要转变思路也是可以轻松办到的，我们使用 ~兄弟选择器配合+选择相邻兄弟元素可以确定方向是👈还是👉，原理如下图:
比如我们第一个input为选中状态，则我们:hover到第四个input时我们的选择器写法
:checked ~input ~input ~input:hover
这样我们就能确定向👉的方向了，同理向左的情况如图
我们第四个input为选中状态，则我们:hover到第一个input时选择器写法为
:hover ~input ~input ~input:checked
最后一个问题，如何让按钮像果冻一样Q弹
我们仔细观察效果图其实能看出来所谓的果冻一样的效果慢放看起来只是宽高在不断改变而已，至于为什么能看起来如此Q弹还是要用到我们的transition-timing-function
transition-timing-function是CSS属性，用于指定过渡效果的速度曲线。这个属性决定了过渡动画在开始、中间和结束时的速度变化。
分享两个调试transition-timing-function的网站
我们通过改变transition-timing-function让我们的平移 缩放 看起来不再是匀速进行的，效果如下
结语
路漫漫其修远兮，吾将上下而求索！
