SVG淋浴小动画

来源：互联网发布：917发卡软件编辑：程序博客网时间：2024/04/27 18:36

SVG淋浴小动画源码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<title>Document</title>
<style>
.shower {
width:200px;
margin:40pxauto;
}
path[id^='water'] {
stroke-width:5;
stroke-linecap:round;
stroke:#2b8ebd;
fill:none;
}
path#water0,
path#water2,
path#water4 {
stroke-dasharray:2020;
animation-name: waterfall1;
animation-iteration-count:infinite;
animation-duration:2s;
animation-timing-function:linear;
}
path#water1,
path#water3 {
stroke-width:4.5;
stroke-dasharray: 30 30;
animation-name: waterfall2;
animation-iteration-count:infinite;
animation-duration:1s;
animation-delay:200ms;
animation-timing-function:linear;
}
@keyframes waterfall1 {
0% {
stroke-dashoffset:20;
stroke-dasharray:3030;
}
100% {
stroke-dashoffset:-246;
stroke-dasharray:3040;
}
}
@keyframes waterfall2 {
0% {
stroke-dashoffset:0;
stroke-dasharray:3030;
}
100% {
stroke-dashoffset:-245;
/* stroke-dasharray:20 40;*/
}
}
</style>
</head>
<body>
<div class="shower">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="200px"
viewBox="0 0 293.30679 546.01726"
id="svg4927"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="babyshower.svg">
<defs
id="defs4929" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.58704602"
inkscape:cx="-146.37481"
inkscape:cy="272.25006"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
showguides="false"
inkscape:window-width="1366"
inkscape:window-height="705"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<metadata
id="metadata4932">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(-94.377469,-138.5609)"
id="g7038"
inkscape:groupmode="layer"
inkscape:label="Original copy">
<path
sodipodi:nodetypes="cscccc"
inkscape:connector-curvature="0"
id="path7042"
d="m 364.14633,535.06775 c 3.60835,83.94131 2.7843,79.207 -76.3537,78.54235 -83.78538,-0.70368 -111.82632,8.62117 -130.39302,-38.63975 -15.97085,-22.85977 -32.91764,-40.87287 -22.04316,-39.76362 l 98.92927,-0.13898 z"
style="opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path7044"
d="m 273.26909,515.05639 0,-101.43251"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 276.49649,507.3396 50.71626,-87.84315"
id="path7046"
inkscape:connector-curvature="0" />
<path
inkscape:connector-curvature="0"
id="path7048"
d="m 278.21955,510.90689 87.84314,-50.71627"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
sodipodi:nodetypes="csc"
inkscape:connector-curvature="0"
id="path7050"
d="m 275.11332,415.46811 c 0,0 11.66786,7.76227 23.22317,9.00266 14.69139,1.57703 28.35843,-3.90695 28.35843,-3.90695"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 323.75565,429.59915 c 0,0 6.22352,12.55625 15.61052,19.40812 11.93461,8.71145 26.5126,10.7957 26.5126,10.7957"
id="path7052"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csc" />
<path
sodipodi:nodetypes="csc"
inkscape:connector-curvature="0"
id="path7054"
d="m 361.17486,461.61607 c 0,0 -5.85282,12.73329 -5.28062,24.34087 0.72745,14.75789 8.27065,27.40551 8.27065,27.40551"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<g
id="g7152">
<g
transform="matrix(-0.86602541,0.50000001,0.50000001,0.86602541,22.510881,46.924001)"
id="g7091">
<g
id="g7139">
<path
sodipodi:nodetypes="ccsc"
inkscape:connector-curvature="0"
id="path7089"
d="m 35.778395,452.99914 0,32.86807 c 0,0 -1.422054,7.4378 4.883256,7.70052 9.015242,0.37563 4.319804,-9.39087 4.319804,-9.39087"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 71.453376,461.26311 c -1.314723,-1.1269 2.412965,-2.93581 -5.071074,-2.25381 -9.78801,0.89196 -10.517782,3.56853 -10.517782,3.56853 0,0 0.939087,0 -4.507621,-2.06599 -5.446709,-2.06599 -14.837586,1.87818 -14.837586,1.87818 l -8.579963,-2.11618 -6.049306,0.0793 -5.73916,2.09449 -3.704295,-2.6155 -4.5864829,-0.76525 -7.17850114,-0.60967 1.65501494,-4.73448 8.1048781,-6.02028 25.467585,-9.09622 22.413158,7.78309 8.724428,6.66553 z"
id="path7087"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscsccccccccccccc" />
<path
sodipodi:nodetypes="cscsc"
inkscape:connector-curvature="0"
id="path7072"
d="m 0.40801039,460.2237 c 0,-5.18134 3.96696001,-9.87217 10.38066961,-13.26766 6.4137,-3.39549 12.57763,-0.35742 25.06113,-9.49564 14.43099,8.98841 18.64743,6.10015 25.06113,9.49564 6.41371,3.39549 10.38067,8.08632 10.38067,13.26766"
style="opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path7079"
d="m 35.778395,438.53719 0,24.04064"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
sodipodi:nodetypes="cssc"
inkscape:connector-curvature="0"
id="path7081"
d="m 15.869735,462.76565 c 0,0 -1.34457,-4.62609 4.507621,-9.01524 3.756351,-2.81726 8.263973,-3.00508 12.395958,-8.63961 1.666024,-2.27185 3.192899,-6.38579 3.192899,-6.38579"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 55.805559,462.76565 c 0,0 1.34457,-4.62609 -4.507621,-9.01524 -3.756351,-2.81726 -8.263973,-3.00508 -12.395958,-8.63961 -1.666024,-2.27185 -3.192899,-6.38579 -3.192899,-6.38579"
id="path7083"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cssc" />
<path
inkscape:connector-curvature="0"
id="path7085"
d="m 0.656514,461.26311 c 1.314723,-1.1269 -2.441628,-2.44163 5.071074,-2.25381 7.512702,0.18782 10.215215,3.25561 10.215215,3.25561 0,0 -0.63652,0.31292 4.810188,-1.75307 5.446709,-2.06599 14.837586,1.87818 14.837586,1.87818"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
sodipodi:nodetypes="cscsc" />
</g>
</g>
<g
id="g7148">
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="m 241.98362,488.12833 c -0.5973,-2.62807 -1.22111,-6.3688 -1.67241,-6.21182 -2.74756,0.95566 -2.26973,5.9729 -2.26973,5.9729 z"
id="path7137"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscc" />
<path
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 139.9668,344.67188 c -0.62117,-0.0415 -1.16307,0.114 -1.53907,0.49023 -2.14583,2.15149 0.54702,3.4709 1.69727,5.0332 -2.37149,-2.10157 -2.73622,-1.1861 -3.12305,-0.80078 -0.54799,0.55084 -1.25691,1.40972 0.92969,3.75586 -2.25993,-2.09925 -2.90063,-1.16939 -3.45117,-0.61914 -0.54799,0.55082 -1.26118,1.49302 0.61719,3.70703 -2.12781,-2.31944 -1.86278,-2.31346 -2.89951,-0.54775 -0.15245,3.91977 1.61959,3.90466 2.39207,5.11754 0.74423,0.53269 2.08314,1.33781 3.57189,1.62357 2.99595,0.5155 3.61173,-0.93326 6.39993,-3.71928 0,0 -4.93201,3.42657 -2.75287,6.12222 3.95926,5.75746 6.78224,14.6703 8.46231,17.09706 1.68006,2.42676 16.42736,5.41384 18.10743,-0.37305 1.68006,-5.78688 -18.29372,-28.93607 -19.78711,-29.49609 -1.64453,-2.28906 -1.00364,-1.37254 -1.64453,-2.28906 -0.99651,-1.58102 -2.3465,-2.11319 -3.63086,-3.35352 -1.06083,-1.06082 -2.31434,-1.67895 -3.34961,-1.74804 z"
transform="translate(94.377469,138.5609)"
id="path7104"
inkscape:connector-curvature="0"
sodipodi:nodetypes="scccccccccccsscccs" />
</g>
</g>
<rect
ry="7.6677551"
y="519.61871"
x="117.3905"
height="15.33551"
width="259.80188"
id="rect7056"
style="opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
sodipodi:nodetypes="csssscc"
inkscape:connector-curvature="0"
id="path7058"
d="m 152.39679,663.20635 c 3.52028,2.01614 7.4062,-1.30601 8.30004,-4.64752 1.59884,-5.97718 -3.42448,-11.42184 -9.09606,-12.35056 -8.32326,-1.36293 -15.51027,5.55497 -16.40107,13.54458 -1.18729,10.64889 7.68756,19.62696 17.9931,20.4516 11.67111,0.93387 21.91139,-7.88957 24.08746,-19.13787 l 14.08094,-45.59854"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.60934544;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.60934544;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 366.07332,663.20635 c -3.52028,2.01614 -7.4062,-1.30601 -8.30004,-4.64752 -1.59884,-5.97718 3.42448,-11.42184 9.09606,-12.35056 8.32326,-1.36293 15.51027,5.55497 16.40107,13.54458 1.18729,10.64889 -7.68756,19.62696 -17.9931,20.4516 -11.67111,0.93387 -21.91139,-7.88957 -24.08746,-19.13787 l -14.08094,-45.59854"
id="path7060"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csssscc" />
<path
sodipodi:nodetypes="ccsc"
inkscape:connector-curvature="0"
id="water0"
d="m 218.54434,194.14594 -85.9444,322.9054 c 0,-6.13888 -4.68447,-13.55535 -16.06072,-20.12009 -12.84937,-7.41482 -19.644432,4.9111 -19.644432,4.9111"
style="" />
<path
inkscape:connector-curvature="0"
id="water2"
d="m 246.78322,191.69038 0,247.36096 c -5.60297,-11.54711 -15.22581,-13.9644 -23.68065,-8.05489"
style=""
sodipodi:nodetypes="ccc" />
<path
sodipodi:nodetypes="ccsc"
inkscape:connector-curvature="0"
id="water1"
d="m 233.27767,194.14594 -41.92908,266.2686 c 0,0 -4.3487,-12.47608 -16.60136,-17.70892 -12.05455,-5.14824 -17.31835,5.93366 -17.31835,5.93366"
style="" />
<path
sodipodi:nodetypes="ccsc"
style=""
d="m 277.32975,194.14594 71.21107,261.51654 c 0,0 6.21023,-11.63086 13.10057,-16.91244 9.11991,-6.9906 15.96111,0.19923 15.96111,0.19923"
id="water4"
inkscape:connector-curvature="0" />
<path
sodipodi:nodetypes="ccc"
inkscape:connector-curvature="0"
id="water3"
d="m 262.59642,194.14594 38.06109,229.59433 c 0,0 3.73162,-22.9517 18.38773,-20.8224"
style="" />
<path
transform="scale(1,-1)"
d="m 305.55474,-192.76054 a 57.142857,49.175762 0 0 1 -28.57143,42.58746 57.142857,49.175762 0 0 1 -57.14286,-1e-5 57.142857,49.175762 0 0 1 -28.57143,-42.58746 l 57.14286,1e-5 z"
sodipodi:end="3.1415927"
sodipodi:start="0"
sodipodi:ry="49.175762"
sodipodi:rx="57.142857"
sodipodi:cy="-192.76054"
sodipodi:cx="248.41188"
sodipodi:type="arc"
id="path7040"
style="opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
</svg>
</div>
</div>
</body>
</html>

感谢 · 转发欢迎大家留言

阅读全文

0 0