<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
<metaname="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;
}
@keyframesmove{
0%{
/*指定线条长度和间距，第一个值是线条长度，定值是空隙距离*/
stroke-dasharray:0,600px;
}
100%{
stroke-dasharray:600px0;
}
}
/*鼠标悬停的样式*/
.icon:hover{
animation:move2s;
}
</style>
</head>
<body>
<!--具体的svg矢量图-->
<svg
t="1679903562217"
class="icon"
viewBox="0010241024"
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="M92854496544c-17.6640-32-14.336-32-32s14.336-3232-32l8320c17.69603214.3363232S945.696544928544zM832928l-1920c-17.6960-32-14.304-32-32s14.304-3232-32l1920c17.664032-14.33632-32l0-160c0-17.69614.304-3232-32s3214.3043232l0160C928884.928884.928928832928zM352928192928c-52.9280-96-43.072-96-96l0-160c0-17.69614.336-3232-32s3214.3043232l0160c017.66414.368323232l1600c17.66403214.3043232S369.664928352928zM128384c-17.6640-32-14.336-32-32L96192c0-52.92843.072-9696-96l1600c17.66403214.3363232s-14.33632-3232L192160C174.368160160174.368160192l0160C160369.664145.664384128384zM896384c-17.6960-32-14.336-32-32L864192c0-17.632-14.336-32-32-32l-1920c-17.6960-32-14.336-32-32s14.304-3232-32l1920c52.92809643.0729696l0160C928369.664913.696384896384z"
fill="#327AF7"
p-id="4356"
></path>
</svg>
<script></script>
</body>
</html>
|
运行时间载入中.....