需求：鼠标悬停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俱乐部！
