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