用css实现鼠标移入按钮，按钮出现动态的渐变色边框效果

最新推荐文章于 2024-09-10 14:11:16 发布

千叶KE

最新推荐文章于 2024-09-10 14:11:16 发布

阅读量3.7k

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/qq1219579255/article/details/120842916

版权

用css实现边框的动态渐变色效果，希望对各位能有一些帮助。

边框.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>边框</title>
    <link rel="stylesheet" href="css/动态边框.css">
  </head>
  <body>
    <div>鼠标移入此处，边框变色</div>
  </body>
</html>

动态边框.css

    /* 初始状态，注意设置相对定位 */
    div {
      width: 300px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      box-sizing: border-box;
      position: relative;
    }
    /* 渐变色边框 */
    div::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      border-top: 1px solid;
      border-left: 1px solid;
      border-image: linear-gradient(to bottom, #eda901, #d16cc7) 1 10;
      width: 0;
      height: 0;
      transition: all 0.4s ease-out 0s;
      visibility: hidden;
      box-sizing: border-box;
    }
    div::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      border-right: 1px solid;
      border-bottom: 1px solid;
      border-image: linear-gradient(to bottom, #eda901, #d16cc7) 1 10;
      width: 0;
      height: 0;
      transition: all 0.4s ease-out 0s;
      visibility: hidden;
      box-sizing: border-box;
    }
    div:hover::before {
      width: 100%;
      height: 100%;
      visibility: visible;
    }
    div:hover::after {
      width: 100%;
      height: 100%;
      visibility: visible;
    }

其实就是又在原本的div上又加了一层图层，会有边框的动态效果，如果原本的div内有想要点击的按钮，可以给需要点击的按钮再添加一个相对定位position: relative;然后给z-index属性高一点就行了。

这是原本的样子：

这是鼠标移入后的样子：

中间还会有个边框逐渐产生的效果，不过我没弄gif图，凑合着看吧。

千叶KE

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫