CSS实现“鼠标悬浮按钮_闪过光泽”效果

创建按钮     创建按钮样式     创建渐变光     创建什么时候渐变光出现     创建渐变光的动画效果     动画开始执行

HTML+CSS，一共6个步骤实现效果

代码效果：

（用灵者GIF录制工具录下来的，效果不怎么好）

HTML：

（先随便写一个按钮，a或者 button 都为所谓。写两个类名，第一个显示按钮的样式，第二个控制按钮的动画，就写一个类名也无所谓，写两个是便于维护）

CSS：

（给按钮添加一些基础的样式，没什么说的，这里需要写个position:relative ，好让它伪类有所依靠）

（在这个按钮后面after伪元素插入一闪而过的光泽效果）

（ 当这个按钮被hover（鼠标悬浮） 或 focus（聚焦）时，在它之后的after伪元素将执行一段动画，时间为1秒，保持执行后的效果并且只执行一次。注意这里的hover和after顺序不能颠倒，否则没有效果出来，也在当按钮在悬浮和聚焦之后才动画开始。 ）

（使用@keyframes规则 ，让这个渐变光移动位置，形成最终的动画效果）

上图的CSS里面有几个可能不常用的属性

text-transform: capitalize（默认是none，改为capitalize只是把文本中的每个单词以大写字母开头，但是我的是中文所以无所谓。）

linear-gradientto bottom255,255,255.5（分别对应：设置渐变线性渐变从上到下    设置rgb颜色为白色    最后一个是指这个背景的透明度为50%）

（大概的渐变效果是这样的）

transform:rotateZ(60deg)（定义旋转，这个渐变光沿着 Z 轴的 3D 旋转60°，单位deg为度（degree）的意思，正数为顺时针旋转，负数为逆时针旋转。）

（沿着Z轴旋转后的渐变光效果是这样的 ）

transform:translate(-5em,9em)（定义移动，把旋转后的渐变光，X水平方向的移动-5em,Y垂直方向移动9em）

（单位 “em”是一个相对的大小 ， 是相对于元素父元素的font-size， 如果在一个设置字体大小为“16px”，此时这个的后代元素将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为“0.75em”，那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”；）

:focus（当这个按钮获得焦点时选择的样式）

animation:sheen1sforwards(定义将动画与这个按钮绑定，一：是规定一个动画的名称，自己看着取名    二：规定动画需要在1秒完成，也就是动画的速度    三：当动画完成后，保持最后一个属性值)

@keyframes规则（使用@keyframes规则，你可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中，您可以更改CSS样式的设定多次。指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成。）

参考链接：

纯CSS实现按钮光泽效果

CSS中强大的em

CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）