最全面的CSS3鼠标滑过动画按钮集锦（学习记录）

最全面的CSS3鼠标滑过动画按钮集锦

set_1:

这一部分使用到的是绘图svg，有基础的绘图模型，比如rect，circle等。然后把svg通过绝对定位在按钮上面，hover出来的效果就是改变svg里面元素的stroke边框属性，包括stroke-width（边框宽度）、stroke-offset:（边框偏移位置）等等属性。文字的hover变动就是改变文字间距了。

set_2：

这一部分使用到的是利用伪元素添加一个箭头，然后箭头设置的left值是负数的。当hover的时候，设置成left:48%居中位置即可。关于文字的移动问题，使用translateX轻松解决。把文字移出外面就可以实现该效果了。

set_3:

这一部分使用到的和set_2部分的其实差不多，但是有一个新东西让我学到了，就是伪元素的content属性可以和attr()元素进行搭配。相当于用css动态添加内容到html里面，而不是使用js。attr()可以接收从html设定的自定义属性值，当hover的时候，将自定义属性写入attr()里面，就可以实现动态显示内容了。

set_4：

第四部分很有意思，实现的是一个类似于波纹的水滴按钮效果。其中最核心的技术应该就是这个animation动画了。这里触发了两个动画，首先，我们要用伪元素生成一下