在最近的工作中遇到了一个需求——实现一些很酷的按钮。看到效果图后，按钮真的很漂亮，弹跳、颜色渐变、扫光、霓虹灯，瞬间勾起了我的好奇心，开启了研究的实现之路。Allbutton.gif1.Basicreserve这些漂亮按钮的实现主要用到一些CSS属性，主要有animation,background-size,background-position,linear-gradient()，下面对这四项内容做简单的介绍。1.1animation动画属性用于指定一组或多组动画。每个组由逗号分隔。语法如下。详细用法参考MDN：animation:namedurationtiming-functiondelayiteration-countdirection;1.2background-sizebackground-size设置背景图片大小。图像可以保持其原始大小，或者被拉伸到新的大小，或者在保持其原始比例的同时缩放到元素可用空间的大小。语法如下。详细用法参考MDN:background-size:length|percentage|cover|contain;1.3background-positionbackground-position设置每张背景图片的初始位置。这个位置是相对于background-origin定义的位置层。详细使用请参考MDN。在使用这个属性的时候有一个位置必须要特别注意，否则很难理解为什么background-position指定的位置和你想要的不一样，这个位置就是它的百分比的计算公式，你可以通过以下公式了解设置百分比后的背景图片结果：background-position:xy;x:{容器(container)的宽度-背景图片的宽度}*x百分比，超出部分隐藏。y:{容器（容器）高度-背景图片高度}*y百分比，超出部分隐藏。1.4linear-gradientlinear-gradient()函数用于创建表示两种或多种颜色线性渐变的图像。结果属于数据类型，是一种特殊的数据类型。它的语法如下。详细用法参考MDN：background-image:linear-gradient(direction,color-stop1,color-stop2,...);,效果实现下面四种动画效果其实都是充分利用CSS属性实现的。让我们看看如何详细实现它们。2.1弹跳效果第一个效果是弹跳效果。所谓弹跳效果就是按钮在大小之间变化。思路如下：创建一个静态按钮；然后使用动画属性创建动画。当变为50%时，按钮变为1.2倍，动画为100%时按钮恢复原状。button1.gif
