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

深碍√TFBOYSˉ_ 2023-02-19 15:27 3阅读 0赞

[最全面的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动画了。这里触发了两个动画，首先，我们要用伪元素生成一下这个隐藏的动画静态内容

.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);
    }

[CSS3]: https://www.html5tricks.com/demo/css3-hover-buttons/index.html#