创建按钮 创建按钮样式 创建渐变光 创建什么时候渐变光出现 创建渐变光的动画效果 动画开始执行
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％是当动画完成。）
参考链接：
网友评论