纯CSS3如何实现鼠标滑过按钮动画

这篇“纯CSS3如何实现鼠标滑过按钮动画”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“纯CSS3如何实现鼠标滑过按钮动画”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇文章有所收获，下面让我们一起来看看具体内容吧。

创新互联专业为企业提供永仁网站建设、永仁做网站、永仁网站设计、永仁网站制作等企业网站建设、网页设计与制作、永仁企业网站模板建站服务，十年永仁做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

效果示例：

看过前两小节的小伙伴，可能不需要看下面的源码，就知道如何实现了，大家可以先自己动手试试，然后再回头来看看。或许实现方式不一样，但只要能实现，都是好方法。

下面对示例讲解

示例一

按钮一

解析：

1、 :before top为0， :after bottom为0，高度 height: 2px ，而宽度为0，并且水平居中

2、在绝对定位的作用下， :hover 改变 :before 、 :after 的宽度，即可形成上图效果

示例二

按钮二

解析：

1、 :before 、 :after ，超出button 2px

2、 :hover 时改变 :before 、 :after 宽高，这里宽高用到了 calc()

calc() 函数用于动态计算长度值。

● 需要注意的是，运算符前后都需要保留一个空格，例如： width: calc(100% - 10px) ；

● 任何长度值都可以使用 calc() 函数进行计算；

● calc() 函数支持 "+", "-", "*", "/" 运算；

● calc() 函数使用标准的数学运算优先级规则；

3、大家应该都留意到了上图中，特意操作了一个属性 mix-blend-mode ，它在这里的作用让button的背景显示出来覆盖在 :before 、 :after 背景色的上方。

css3 mix-blend-mode 语法

mix-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

hue 色相模式 “色相”模式只用“混合色”颜色的色相值进行着色，而使饱和度和亮度值保持不变。

这里就不具体讲述 mix-blend-mode ，希望后面能用一章来专门讲解。

示例三

  按钮三