<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5 SVG手机移动端底部图标菜单展开动画特效</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/anime.min.js"></script>
</head>
<body>
<div class="phone">
<svg xmlns="http://www.w3.org/2000/svg" class="body" width="500" height="400" viewBox="0 0 500.00001 400.00001"><path d="M446-48.656v331.478H68V-48.652C52.55-35.517 43-15.93 43 6.04V316.16c0 39.734 31.965 71.72 71.67 71.72h284.66c39.705 0 71.67-31.986 71.67-71.72V6.04c0-21.97-9.548-41.56-25-54.696z" fill="#0e232e"/></svg>
<div class="bg"></div>
<svg class="display" width="375" viewBox="0 0 400 75">
<path
id="avatar-bottom"
d="m 40.471946,55.027233 c 0,0 -3.017416,-8.4852 11.313708,-8.4852 14.331124,0 11.844039,8.4852 11.844039,8.4852 z"
style="opacity:1;fill:#757575;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="avatar-top"
d="m 46.1288,36.642533 c 0.03081,-2.846045 3.185168,-6.218845 6.010408,-6.187145 2.82524,0.032 5.844534,3.4494 5.83363,6.275445 -0.0109,2.8262 -3.075047,6.2855 -5.922019,6.2756 -2.846972,-0.01 -5.952825,-3.5179 -5.922019,-6.3639 z"
style="fill:#757575;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
style="fill:#757575;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 139.23417,32 c -1.15408,0.098 -1.84916,0.6165 -2.12132,2.12139 0,3.5507 0,16.4285 0,19.9757 0.27216,1.6817 0.71446,1.7996 2.12132,2.1214 4.38117,0 19.85356,0 24.21841,0 1.93417,-0.1817 2.45465,-0.7466 2.82842,-2.4749 0,-3.2369 -0.35355,-13.2801 -0.35355,-16.2635 -0.29673,-1.3922 -0.97232,-2.1756 -2.65165,-2.2981 -2.34249,0 -11.49049,0 -11.49049,0 l -2.65165,-3.00519 c 0,0 -7.85468,-0.1768 -9.89949,-0.1768 z"
id="folder" />
<path
id="email"
d="m 236.50736,37 c 0.1,0 0,14.2304 0,17.4999 0.20089,1.43 0.63301,2.1164 2.375,2.5 4.37754,0 19.90557,0 24.25,0 1.56248,-0.5781 2.07737,-1.2775 2.25,-2.75 0,-3.2853 0,-17.3749 0,-17.3749 l -14.25,-8.750045 z"
style="opacity:0.99599998;fill:#757575;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="email-inner"
d="m 251.18928,32 -11.66726,6.894245 11.66726,7.6014 11.49048,-7.2478 z"
style="opacity:0.99599998;fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="Cart"
transform="translate(285)"
d="m 53,40 c 0,0.414214 -0.08395,0.80882 -0.235755,1.167735 -0.151808,0.358915 -0.371478,0.682139 -0.642925,0.953585 -0.271446,0.271447 -0.59467,0.491117 -0.953585,0.642925 -0.358915,0.151808 -0.753521,0.235755 -1.167735,0.235755 -0.414214,0 -0.80882,-0.08395 -1.167735,-0.235755 -0.358915,-0.151808 -0.682139,-0.371478 -0.953585,-0.642925 -0.271447,-0.271446 -0.491117,-0.59467 -0.642925,-0.953585 -0.151808,-0.358915 -0.235755,-0.753521 -0.235755,-1.167735 0,-0.414214 0.08395,-0.80882 0.235755,-1.167735 0.151808,-0.358915 0.371478,-0.682139 0.642925,-0.953585 0.271446,-0.271447 0.59467,-0.491117 0.953585,-0.642925 0.358915,-0.151808 0.753521,-0.235755 1.167735,-0.235755 0.414214,0 0.80882,0.08395 1.167735,0.235755 0.358915,0.151808 0.682139,0.371478 0.953585,0.642925 0.271447,0.271446 0.491117,0.59467 0.642925,0.953585 0.151808,0.358915 0.235755,0.753521 0.235755,1.167735 z"
style="opacity:1;fill:#757575;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="Cart-fw"
transform="translate(285)"
d="m 53,40 a 3,3 0 0 1 -3,3 3,3 0 0 1 -3,-3 3,3 0 0 1 3,-3 3,3 0 0 1 3,3 z"
style="opacity:1;fill:#757575;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
id="Cart-bw"
transform="translate(285)"
d="m 53,40 a 3,3 0 0 1 -3,3 3,3 0 0 1 -3,-3 3,3 0 0 1 3,-3 3,3 0 0 1 3,3 z"
style="opacity:1;fill:#757575;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
id="map"
transform="translate(197)"
d="m 147,40 c 0,0.828427 0.33579,1.578427 0.87868,2.12132 0.54289,0.542894 1.29289,0.87868 2.12132,0.87868 0.82843,0 1.57843,-0.335786 2.12132,-0.87868 0.54289,-0.542893 0.87868,-1.292893 0.87868,-2.12132 0,-0.828427 -0.33579,-1.578427 -0.87868,-2.12132 -0.54289,-0.542894 -1.29289,-0.87868 -2.12132,-0.87868 -0.82843,0 -1.57843,0.335786 -2.12132,0.87868 -0.54289,0.542893 -0.87868,1.292893 -0.87868,2.12132 z"
style="opacity:1;fill:#757575;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="map-inner"
transform="translate(197)"
d="m 147,46.2 a 3,3 0 0 1 -3,3 3,3 0 0 1 -3,-3 3,3 0 0 1 3,-3 3,3 0 0 1 3,3 z"
style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="printer-top"
transform="translate(95)"
style="fill:#757575;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 249,40 c 0,0.414214 0.084,0.80882 0.23576,1.167735 0.1518,0.358915 0.37147,0.682138 0.64292,0.953585 0.27145,0.271447 0.59467,0.491117 0.95358,0.642925 0.35892,0.151808 0.75352,0.235755 1.16774,0.235755 0.41421,0 0.80882,-0.08395 1.16774,-0.235755 0.35891,-0.151808 0.68213,-0.371478 0.95358,-0.642925 0.27144,-0.271447 0.49111,-0.59467 0.64292,-0.953585 0.15181,-0.358915 0.23576,-0.753521 0.23576,-1.167735 0,-0.414214 -0.0839,-0.80882 -0.23576,-1.167735 -0.15181,-0.358915 -0.37148,-0.682139 -0.64292,-0.953585 -0.27145,-0.271447 -0.59467,-0.491117 -0.95358,-0.642925 -0.35892,-0.151808 -0.75353,-0.235755 -1.16774,-0.235755 -0.41422,0 -0.80882,0.08395 -1.16774,0.235755 -0.35891,0.151808 -0.68214,0.371478 -0.95358,0.642925 -0.27144,0.271447 -0.49111,0.59467 -0.64292,0.953585 -0.15181,0.358915 -0.23576,0.753521 -0.23576,1.167735 z" />
<path
id="printer-bottom"
transform="translate(95)"
style="fill:#757575;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 249.25533,40 c -0.011,0.414214 0.084,0.797771 0.23576,1.167735 0.16285,0.347866 0.37147,0.671089 0.64292,0.953585 0.24935,0.216204 0.57257,0.457971 0.95358,0.642925 0.30368,0.118662 0.70933,0.213658 1.16774,0.235755 0.41421,-0.03315 0.80882,-0.106047 1.16774,-0.235755 0.36996,-0.184954 0.75947,-0.426721 0.99777,-0.676071 0.2162,-0.238301 0.41377,-0.484184 0.59873,-0.920439 0.12971,-0.314721 0.24681,-0.742472 0.23576,-1.167735 0,-0.336874 -0.106,-0.764626 -0.23576,-1.167735 -0.17614,-0.34344 -0.34918,-0.645378 -0.64292,-0.953585 -0.19411,-0.216204 -0.56152,-0.457971 -0.95358,-0.642925 -0.30368,-0.107614 -0.68172,-0.246804 -1.16774,-0.235755 -0.40317,-0.01105 -0.83092,0.095 -1.16774,0.235755 -0.41415,0.173906 -0.72634,0.415673 -0.95358,0.642925 -0.30459,0.315642 -0.45796,0.572573 -0.64292,0.953585 -0.15181,0.392061 -0.24681,0.786667 -0.23576,1.167735 z" />
<path
id="printer-light"
transform="translate(95)"
style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 255.255,49.099998 c 0,1.656854 -1.34315,3 -3,3 -1.65685,0 -3,-1.343146
