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

2023-04-0416:04:48网页制作Comments1,104 views字数 2040阅读模式

需求：鼠标悬停svg图标的时候需要呈现描边效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32857.html

实现效果如图所示：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32857.html

CSS实现鼠标悬停svg图标呈现描边效果
代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32857.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!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>Document</title>
    <style>
      /* 给需要描边的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;
      }
    </style>
  </head>
  <body>
    <!-- 具体的svg矢量图 -->
    <svg
      t="1679903562217"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="4355"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="200"
      height="200"
    >
      <!-- 有几个path就绑定几个icon1样式 -->
      <path
        class="icon1"
        d="M928 544 96 544c-17.664 0-32-14.336-32-32s14.336-32 32-32l832 0c17.696 0 32 14.336 32 32S945.696 544 928 544zM832 928l-192 0c-17.696 0-32-14.304-32-32s14.304-32 32-32l192 0c17.664 0 32-14.336 32-32l0-160c0-17.696 14.304-32 32-32s32 14.304 32 32l0 160C928 884.928 884.928 928 832 928zM352 928 192 928c-52.928 0-96-43.072-96-96l0-160c0-17.696 14.336-32 32-32s32 14.304 32 32l0 160c0 17.664 14.368 32 32 32l160 0c17.664 0 32 14.304 32 32S369.664 928 352 928zM128 384c-17.664 0-32-14.336-32-32L96 192c0-52.928 43.072-96 96-96l160 0c17.664 0 32 14.336 32 32s-14.336 32-32 32L192 160C174.368 160 160 174.368 160 192l0 160C160 369.664 145.664 384 128 384zM896 384c-17.696 0-32-14.336-32-32L864 192c0-17.632-14.336-32-32-32l-192 0c-17.696 0-32-14.336-32-32s14.304-32 32-32l192 0c52.928 0 96 43.072 96 96l0 160C928 369.664 913.696 384 896 384z"
        fill="#327AF7"
        p-id="4356"
      ></path>
    </svg>
    <script></script>
  </body>
</html>
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32857.html
  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/zhizuo/32857.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定