svg实现鼠标交互毛发缩短旋转动画效果代码

代码语言:html

所属分类:动画

代码描述:svg实现鼠标交互毛发缩短旋转动画效果代码

代码标签: svg 鼠标 交互 毛发 缩短 旋转 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
body {
	height: 100vh;
	margin: 0;
	display: grid;
	place-items: center;
	background: #eca;
	overflow: hidden;
}

svg {
	animation: swirl ease-in-out forwards;
}

.hair {
	transform-origin: center;
	transition: stroke-width 0.2s;
	&:hover, &:active {
		stroke-width: 1px;
	}
}

@keyframes swirl {
	100% {
		transform: translateY(0) rotate(-360deg);
	}
}
</style>


  
</head>

<body translate="no">
  <svg width="100vw" height="100vh" viewBox="0 0 100 100" style="animation-duration: 7s">
  <path d="M 50 50 M 50 50 L 50.158738352210314 50.02005331737029 L 50.30994661156116 50.07958076389276 L 50.44629271322636 50.17669978528865 L 50.56083627522807 50.3083223514251 L 50.647213595499956 50.470228201833976 L 50.69980988232456 50.65716522169154 L 50.71391486851853 50.862974831908886 L 50.68585829757311 51.08073974464258 L 50.613122179853704 51.30295095555107 L 50.494427190999915 51.52169042607225 L 50.32979111367087 51.72882556128249 L 50.12055779749628 51.916211318582285 L 49.86939571937903 52.0758955951308 L 49.58026585532798 52.200323441632264 L 49.25835921350013 52.28253563910837 L 48.91000501359341 52.31635725431301 L 48.542551117657126 52.29657195736548 L 48.164218909523775 52.21907813919427 L 47.78393537263891 52.08102320202322 L 47.41114561800017 51.88091280733592 L 47.05560955505262 51.61869234498177 L 46.72718676967335 51.295798425450066 L 46.435613967046635 50.91517878476667 L 46.190279546952404 50.48127961688693 L 46 50 L 45.87280284253177 49.478613748372496 L 45.81572074392432 48.925659687447826 L 45.83460134322063 48.35080200397264 L 45.93393700459647 47.764662952168045 L 46.11671842700025 47.17863078899613 L 46.3843156079898 46.604646354593704 L 46.73638917248671 46.05497219698796 L 47.1708345225109 45.54194855334936 L 47.683760653886004 45.07774083458485 L 48.26950483150029 44.67408350874714 L 48.92068362798623 44.34202543580275 L 49.628280124386464 44.091681767704635 L 50.38176635873822 43.93199749115611 L 51.16925940301492 43.87052755545298 L 51.977708763999665 43.91323829571102 L 52.79311215266687 44.06433453582291 L 53.60075606225885 44.326116340626456 L 54.38547704947098 44.69886888970257 L 55.131939137046736 45.18078837426203 L 55.824922359499624 45.76794618349419 L 56.44961716512284 46.454292958611376 L 56.99191917387965 47.231703363811214 L 57.43871867746789 48.09006166657391 L 57.77817925830551 49.01738744885585 L 58 50 L 58.09565596272614 51.022719185884725 L 58.05861190059021 52.06909986121159 L 57.88450460033237 53.121696206766075 L 57.57128971557898 54.162351744238826 L 57.119349550499535 55.17251022017377 L 56.531558901695846 56.133542069121056 L 55.81330678650806 57.02708077411519 L 54.97247265740509 57.8353631486587 L 54.01935651237429 58.54156737527922 L 52.9665631459995 59.13014255643347 L 51.82884163035667 59.587123567112 L 50.62288195373079 59.90042514600845 L 49.36707156314453 60.06010942255698 L 48.081215338642174 60.058621447461775 L 46.78622325850055 59.8909877694696 L 45.50377068107282 59.554973674041165 L 44.255936757825154 59.0511953613816 L 43.06482699153425 58.38318408140058 L 41.95218635326763 57.55740004945274 L 40.93900966300059 56.583194825675704 L 40.04515611470171 55.472721737795496 L 39.288974882567345 54.24079484692749 L 38.686948678017586 52.904697882085514 L 38.25336193643658 51.48394548540136 L 38 50.00000000000001 L 37.93588523201595 48.475947879858076 L 38.06705545489527 46.936140590128986 L 38.39638945611462 45.405805582495226 L 38.923483564245565 43.910633559354316 L 39.64458247200067 42.476348770656344 L 40.55256658861851 41.12826950716419 L 41.636997254497174 39.890866254781656 L 42.884220162678915 38.78732514933324 L 44.27752632136541 37.839124414856705 L 45.79736887650071 37.065631378385916 L 47.421633111300416 36.48372742997325 L 49.125955968151956 36.10746794027846 L 50.88409051497272 35.947783663729936 L 52.668309919700725 36.01222954962348 L 54.44984471899924 36.30478616534979 L 56.19934648518746 36.82571811609476 L 57.887370422090825 37.57149293661034 L 59.484868967460514 38.53476294749627 L 60.963688156418016 39.7044115268325 L 62.297058314499196 41.0656641651544 L 63.46007060547373 42.60026356579764 L 64.43013106098566 44.286706942333794 L 65.18738396649694 46.10054256925506 L 65.71509686882133 48.01472158034142 L 66 49.99999999999999 L 66.03257357324196 52.02538505439914 L 65.80727718961926 54.05861895853043 L 65.32271648743838 56.06669262824348 L 64.58174315592989 58.01638113705255 L 63.59148550549912 59.87479223851354 L 62.36330792106713 61.60991891655057 L 60.91269870449757 63.19118671632151 L 59.25908701723705 64.58998655267483 L 57.42559084489486 65.78018379500739 L 55.43869910099905 66.73859468679471 L 53.32789214704246 67.44542157294151 L 51.12520610996527 67.88463897343463 L 48.86474740691006 68.04432324998315 L 46.58216482195641 67.91691945329129 L 44.31408730350101 67.49943989983083 L 42.097536348552275 66.79359009376934 L 39.96932239799321 65.80581876539775 L 37.965435073544754 64.5472900236069 L 36.12043733389635 63.03377689688225 L 34.46687370800102 61.28547684401549 L 33.03470267435081 59.32675113060923 L 31.850762995461334 57.18579126840492 L 30.938283388988545 54.89421697940436 L 30.31644432592076 52.48661135391579 L 30 50.000000000000014 L 29.998967621500125 47.473282011343656 L 30.318390165866212 44.94662149281015 L 30.958177569008615 42.46080916101778 L 31.913030123894654 40.056604166540595 L 33.172446517001084 37.77406675231657 L 34.720817569247195 35.651892659734706 L 36.537605336507696 33.72676031257531 L 38.597605802846964 32.03270174531711 L 40.871291988844845 30.600507995128538 L 43.32523292150112 29.457179248024683 L 45.92258259461468 28.625429424143725 L 48.623631811917484 28.123254112852283 L 51.38641467120718 27.96356983630376 L 54.16736043638644 28.153931543793945 L 56.92198067399881 28.696334034988553 L 59.60558081770801 29.587101696366588 L 62.17398478192276 30.816869532594193 L 64.58426088544996 32.3706570052899 L 66.79543717578932 34.22803467940301 L 68.76919426949877 36.36338214681461 L 70.47052404582463 38.746234172983904 L 71.86834294809165 41.341710520856324 L 72.93604925552599 44.11102347193626 L 73.65201447933715 47.01205571182699 L 74 49.999999999999986 L 73.96949118375778 53.02805092291356 L 73.55594247864832 56.048138055849215 L 72.76092837454439 59.01168904972093 L 71.5921965962808 61.87041052986626 L 70.06362146049871 64.57707425685332 L 68.19505694043846 67.08629576398005 L 66.01209062248705 69.35529265852784 L 63.54570137706902 71.34460995669095 L 60.83182517741545 73.01880021473553 L 57.910835055998675 74.34704681715593 L 54.82694266372822 75.30371957877102 L 51.62753026619977 75.86885280086081 L 48.36242325067558 76.02853707740933 L 45.083114305270676 75.77521745912081 L 41.84195134850141 75.10789203019206 L 38.691302016031706 74.0322065134975 L 35.68270803816126 72.56044216941388 L 32.86604315555528 70.71139596581327 L 30.288688314525032 68.51015374431174 L 27.99473775300144 65.98775886235529 L 26.02424923399991 63.18078052342297 L 24.41255110835535 60.130787689882396 L 23.189618099959485 56.88373607672317 L 22.379526715404943 53.48927722243023 L 22 50.00000000000002 L 22.062050010984304 46.470616142829236 L 22.56972487683715 42.957102395491376 L 23.519965681902608 39.51581273954036 L 24.902576683543742 36.20257477372688 L 26.7003105620015 33.0717847339768 L 28.889068549875887 30.17551581230521 L 31.438213418518185 27.562654370368996 L 34.31099144301499 25.278078341300986 L 37.465057656324255 23.36189157540039 L 40.85309696650153 21.84872711766346 L 44.42353207792889 20.767131418314214 L 48.12130765568298 20.13904028542611 L 51.88873882744166 19.979356008877588 L 55.6664109530722 20.29563353796443 L 59.394116628998376 21.087881904627324 L 63.01181515022857 22.34848527663842 L 66.46059914175471 24.06224612857806 L 69.68365280343946 26.206551063083563 L 72.6271861951606 28.7516578319735 L 75.24133022449834 31.66110012847481 L 77.48097748617553 34.89220478017016 L 79.30655483519766 38.39671409937888 L 80.68471454455504 42.121504374617416 L 81.58893208985297 46.00938984331255 L 82 49.99999999999997 L 81.90640879427363 54.03071679142786 L 81.30460776767738 58.037657153168034 L 80.19914026165046 61.95668547119825 L 78.60265003663172 65.72443992267998 L 76.53575741549837 69.279356275193 L 74.02680595980976 72.56267261140954 L 71.11148254047666 75.51939860073409 L 67.832315736901 78.09923336070707 L 64.23805950993615 80.25741663446364 L 60.38297101099827 81.95549894751716 L 56.32599318041412 83.16201758460052 L 52.12985442243427 83.85306662828697 L 47.86009909444111 84.0127509048355 L 43.5840637885848 83.6335154649503 L 39.369815393501845 82.71634416055329 L 35.28506768351103 81.27082293322562 L 31.39609367832931 79.31506557343 L 27.766651237565693 76.87550190801952 L 24.45693929515375 73.98653059174126 L 21.522601798001798 70.690040880695 L 19.013795793649017 67.03480991623671 L 16.974339221249295 63.075784111359724 L 15.44095281093044 58.87325517404201 L 14.442609104889101 54.49194309094455 L 14 50.00000000000004 L 14.125132400468452 45.46795027431495 L 14.821059587808094 40.96758329817256 L 16.08175379479654 36.57081631806306 L 17.892123243192827 32.348545380913166 L 20.228174607001833 28.369502715637125 L 23.057319530504582 24.69913896487572 L 26.33882150052856 21.398548428162762 L 30.024377083183015 18.52345493728487 L 34.058823323803544 16.12327515567229 L 38.38096101150194 14.240274987302243 L 42.92448156124297 12.908833412484732 L 47.618983499448476 12.154826457999938 L 52.39106298367613 11.995142181451413 L 57.16546146975809 12.437335532134945 L 61.866252583997934 13.479429774266087 L 66.41804948274927 15.10986885691031 L 70.74721350158666 17.307622724561924 L 74.78304472142906 20.042445120877325 L 78.45893521453189 23.27528098454398 L 81.713466179498 26.958818110135127 L 84.49143092652643 31.03817538735642 L 86.74476672230371 35.45171767790156 L 88.43337983358408 40.13198527729857 L 89.52584970036881 45.00672397479824" fill="none" stroke="#333" stroke-width="0.5" stroke-dasharray="1000" stroke-dashoffset="1000">
    <animate attributeName="stroke-dashoffset" values="1000;0" dur="7s" fill="freeze" calcMode="linear"></animate>
  </path>
  <path class="hair" d="M 50.21884616733605 50.038588483925984 Q 54.32308788724407 61.314899933356884 47.61412350233209 64.8107047791091" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.0168s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 50.417641164793736 50.152008952589185 Q 52.5014192967969 61.96970198873568 45.2873390149087 64.24739826437781" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.0504s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 50.57735026918962 50.333333333333336 Q 50.57735026918962 62.333333333333336 43.07735026918962 63.323714390099916" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.0672s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 50.68092839388353 50.571366764165816 Q 48.597150261880365 62.38905980031231 41.03911424858544 62.062033410950484" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.1008s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 50.71420845520726 50.85116049235442 Q 46.60996673529924 62.127471941785316 39.223541808422596 60.49297463765251" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.1176s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 50.666666666666664 51.15470053837925 Q 44.666666666666664 61.547005383792516 37.67628560990009 58.65470053837926" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.1344s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 50.532031334062154 51.46174407677808 Q 42.81858001782368 60.65427739420582 36.43664202227353 56.592046226663115" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.168s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 50.308707871407876 51.75076933868837 Q 41.11617455398014 59.46422065492684 35.53659157622475 54.355492003692326" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.1848s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 50 52 Q 39.607695154586736 58 35 52" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.21839999999999998s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 49.614115160740155 52.188461673360464 Q 38.337803711309256 56.29270339326849 34.84199886555703 49.58373900835652" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.2352s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 49.16395076075948 52.29702640636555 Q 37.34625772461298 54.380804538368714 35.068561448970854 47.16672425648052" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.252s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 48.666666666666664 52.309401076758505 Q 36.666666666666664 52.309401076758505 35.676285609900084 44.80940107675851" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.2856s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 48.14305801646111 52.21301728012149 Q 36.32536498031462 50.12923914811832 36.65239136967644 42.571203134823406" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.3024s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 47.616750621407625 51.99978367458034 Q 36.340439171976726 47.89554195467232 37.974936476109534 40.509117027795675" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.3192s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 47.11324865405187 51.666666666666664 Q 36.72094380863861 45.66666666666666 39.61324865405188 38.676285609900084" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.35280000000000006s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 46.6588706816501 51.21607162071349 Q 37.46633736422237 43.502620304475016 41.528568531765075 37.12068230892487" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.3696s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 46.27961515528722 50.656004226741736 Q 38.56616383904874 41.463470909314 43.67489249028326 35.88388793155862" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.4032s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 46 50 Q 39.99999999999999 39.607695154586736 46 35" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.42000000000000004s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 45.841922820615125 49.266818805406295 Q 41.73768110070709 37.990507355975396 48.44664548561907 34.49470251022318" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.43679999999999997s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;3.3333333333333335" dur="0.5s" begin="click" fill="freeze"></animate>
  </path>
  <path class="hair" d="M 45.82358835206263 48.47991047410814 Q 43.739810220059454 36.662217437961644 50.953890501947654 34.38452116231951" fill="none" stroke="#333" stroke-width="0.35" stroke-dasharray="10" stroke-dashoffset="10">
    <animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" begin="0.4704s" fill="freeze"></animate>
    <animate attributeName="stroke-dashoffset" values="0;5" dur="0.5s" begin="mouseover" fill="freeze"></animate>
    <animate attributeName="str.........完整代码请登录后点击上方下载按钮下载查看

网友评论0