需求:鼠标悬停svg图标的时候需要呈现描边效果
实现效果如图所示:
代码如下:
Document /* 给需要描边的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俱乐部!