css边框动画

最新推荐文章于 2025-06-01 02:56:14 发布

weixin_30553777

最新推荐文章于 2025-06-01 02:56:14 发布

阅读量317

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/love314159/p/10302463.html

本文介绍了一种使用CSS实现的动态按钮效果，通过伪元素和过渡动画，在鼠标悬停时改变按钮背景颜色，实现平滑的视觉变化。此方法无需额外的JavaScript代码，纯CSS即可完成。

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

<div class="button">hover me to change</div>

 .button{
    width:200px;
    height:60px;
    position: relative;
    background: #fff;
    margin:30px auto;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    line-height: 60px;
    &::before{
      content:'';
      width:0;
      height:0;
      background:  #00adb5;
      position: absolute;
      top:-1px;right:-1px;
      z-index: -1;
      transition: width .5s,height .5s;
    }
    &::after{
      content:'';
      width:0;
      height:0;
      background:  #00adb5;
      position: absolute;
      bottom:-1px;left:-1px;
      z-index: -1;
      transition: width .5s,height .5s;
    }
    &:hover::before{
      width:calc(100% + 2px);
      height:calc(100% + 2px);
    }
    &:hover::after{
      width:calc(100% + 2px);
      height:calc(100% + 2px);
    }
  }