使用CSS3实现按钮特效

最新推荐文章于 2025-05-04 09:06:40 发布

dengdengda

最新推荐文章于 2025-05-04 09:06:40 发布

阅读量3.6k

点赞数 1

分类专栏：前端笔记（CSS3动画）文章标签： css3 按钮特效

本文链接：https://blog.youkuaiyun.com/dengdengda/article/details/54287330

版权

本文记录了一个使用CSS3实现的按钮特效，当鼠标移入时，四条线从四个方向动态进入，线条的宽度、高度及位置发生变化。通过分析HTML结构和CSS动画，详细介绍了如何创建这一效果，包括定位、过渡属性的使用，以及解决线条与边框重合的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在慕课网上看到了一个按钮特效，觉得挺好看的，记录一下。

简单分析一下就是鼠标移入的时候有四条线分别从四个方向移入，横向的两条线宽度和位置发生变化，纵向的两条线高度和位置发生变化。

HTML代码

<a href="#" class="button">
      <span class="line line-top"></span>
      <span class="line line-right"></span>
      <span class="line line-bottom"></span>
      <span class="line line-left"></span>
       GET STARTED
 </a>

定位问题

a元素作为父元素，定位为relative，让span元素相对于它定位，span元素定位为absolute。a元素是内联元素，我需要给它设置宽和高，所以需要改变它的display属性。然后给span元素加上过渡属性。

a{
      display: inline-block;
      width: 300px;
      height: 80px;
      line-height: 80px;

最低0.47元/天解锁文章