CSS實(shí)現(xiàn)鼠標(biāo)懸停svg圖標(biāo)描邊效果
發(fā)布時間：2023-03-30 16:53:51 作者：多看書少吃飯 
我要評論
我要評論這篇文章主要介紹了CSS實(shí)現(xiàn)鼠標(biāo)懸停svg圖標(biāo)描邊效果,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
需求：鼠標(biāo)懸停svg圖標(biāo)的時候需要呈現(xiàn)描邊效果
實(shí)現(xiàn)效果如圖所示：
代碼如下：
<!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;
}
}
/* 鼠標(biāo)懸停的樣式 */
.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>
到此這篇關(guān)于CSS實(shí)現(xiàn)鼠標(biāo)懸停svg圖標(biāo)描邊效果的文章就介紹到這了,更多相關(guān)css svg描邊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css 11種方法實(shí)現(xiàn)一個tips帶有描邊的小箭頭
這篇文章主要介紹了css 11種方法實(shí)現(xiàn)一個tips帶有描邊的小箭頭,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編2019-02-21