IT俱乐部 CSS CSS实现鼠标悬停svg图标描边效果

CSS实现鼠标悬停svg图标描边效果

发布: 2024年 11月 1日 373阅读

需求：鼠标悬停svg图标的时候需要呈现描边效果

实现效果如图所示：

代码如下：

<title>Document</title>
  /* 给需要描边的svg下的path绑定样式 */
  .icon1 {
    /* 填充颜色 */
    fill: none;
    /* 图形颜色的外轮廓颜色 */
    stroke: #333333;
    /* 图形元素的外轮廓的宽度 */
    stroke-width: 3;
    /* 两端的形状 */
    stroke-linecap: round;
  }
  @keyframes move {
    0% {
      /* 指定线条长度和间距，第一个值是线条长度，定值是空隙距离*/
      stroke-dasharray: 0, 600px;
    }
    100% {
      stroke-dasharray: 600px 0;
    }
  }
  /* 鼠标悬停的样式 */
  .icon:hover {
    animation: move 2s;
  }

到此这篇关于CSS实现鼠标悬停svg图标描边效果的文章就介绍到这了,更多相关css svg描边内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章，希望大家以后多多支持IT俱乐部！

本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/css/13954.html

56赞

标签:css svg 图标描边鼠标悬停