美文网首页
CSS实现“鼠标悬浮按钮_闪过光泽”效果

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

作者: SOLDIER_76 | 来源:发表于2017-12-15 18:04 被阅读0次

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

    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)

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/rawrwxtx.html