本文共 1276 字，大约阅读时间需要 4 分钟。
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动画了。这里触发了两个动画，首先，我们要用伪元素生成一下这个隐藏的动画静态内容
.anim:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius:50%;} 接下来，我们就对这个部分做hover的动画显示。
第一部分动画：背景颜色由有色变为无色。 第二部分动画：宽度由0%到100% 这样一个动画就会变成，hover之后，一个波纹就会从小变大，扩展到整个区域，再变成透明色。其中区域是圆状的。set_5:
这一部分更加简单了，其实就是隐藏框的平移，难点是要先把整个隐藏框画出来，画出来要借助transform的各种属性来处理。
.set_5_button:after { content: ""; position: absolute; top: 0; left: 0; width: 500%; height: 1000%; background: #838383; z-index: -1; transform-origin: 0% 0%; /* transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg); */ transform: translateY(10%) translateX(16%) rotate(-45deg); transition: transform .3s;}.set_5_button:hover::after { transform: translateY(10%) translateX(-25px) rotate(-45deg);} 转载地址：http://zwch.baihongyu.com/