纯 CSS 实现 beautiful 按钮
近期工作中遇到一个需求——实现一些酷炫的按钮，看到效果图之后，按钮确实漂亮，有弹跳、颜色渐变、扫光、霓虹灯，瞬间激起了我的好奇心，开启了研究实现之路。（欢迎关注公众号前端点线面）
一、基础储备
实现这些漂亮的按钮主要利用了一些 CSS 的属性，主要有 animation、background-size、background-position、linear-gradient(),下面对这四个内容进行简要概述。
1.1 animation
animation属性用来指定一组或多组动画，每组之间用逗号相隔，其语法如下所示，详细用法可参考MDN：
1.2 background-size
background-size设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸，其语法如下所示，详细用法可参考MDN：
1.3 background-position
background-position为每一个背景图片设置初始位置。 这个位置是相对于由 background-origin 定义的位置图层的，详细用法可参考MDN.
在使用这个属性时有一个位置必须特别注意，否则很难理解为什么 background-position 指定的位置和自己想要的不一样，这个位置就是其百分比的计算公式，通过下面公式就可以理解设定百分比后背景图片成了什么结果了：
1.4 linear-gradient
linear-gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型，其语法如下所示，详细用法可参考MDN：
二、效果实现
下面的四种动画效果其实就是充分利用 CSS 属性实现的，让我们具体来看看都是如何实现的。
2.1 弹跳效果
第一种效果是弹跳效果，所谓弹跳效果就是按钮在大小之间变换，其思想如下：
创建一个静态的按钮；
然后利用 animation 属性，创建动画，当变换到 50%时，按钮变换到 1.2 倍，到动画 100%时按钮又恢复原样。
2.2 颜色渐变效果
第二种是颜色渐变效果，所谓颜色渐变效果就是颜色从一种颜色到另一种颜色，然后循环如此，其思想如下：
创建一个静态按钮；
添加渐变颜色对称的的背景色；
背景色 x 轴方向拉伸至 200%，这样就可以让原来对称轴处的背景色由中间到了右侧；
最后利用 animation 实现操作位置的动画，模拟出颜色不断渐变的动画。
2.3 扫光效果
第三种是扫光效果，所谓扫光指的就是一个白色透明颜色从一端不断向另一端扫描，其思想如下：
创建一个静态按钮；
在静态按钮前利用::before 伪元素，设置该元素的背景色为白色微透明的颜色，并将该中心位置通过缩放移动到容器右侧；
利用 animation 实现动画，并不断变换位置实现扫光效果。
2.4 霓虹灯效果
第四种是霓虹灯效果，所谓霓虹灯效果其实更像一种斜线在不断移动，其原理如下所示：
创建一个静态按钮；
在静态按钮前利用::before 伪元素，设置该元素的背景色为倾斜的霓虹灯效果，该效果实现是通过创建一个 20px * 20px 的正方形背景，然后利用 linear-gradient 将背景色 135°方向渐变倾斜，实现小返回的霓虹灯，然后通过背景不断 repeat 实现整个的效果；
利用 animation 实现动画，并不断变换位置实现霓虹灯效果。
1.如果觉得这篇文章还不错，来个分享、点赞吧，让更多的人也看到
2.欢迎关注公众号前端点线面，《前端百题斩》pdf 版在等你
版权声明: 本文为 InfoQ 作者【执鸢者】的原创文章。
原文链接:【http://xie.infoq.cn/article/eef1b4e5b4713c1f153218540】。文章转载请联系作者。
让前端知识变的简单可依赖。 2019.09.05 加入
以脑图分享前端知识，让知识变的简单可依赖。
评论