<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>交互式小狗和碗式橄榄球动画</title>
<style>
html,
body {
background: #7DAFAA;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#puppy {
width: 100%;
visibility: hidden;
}
#pupContainer {
width: 50%;
margin: 15vh 25%;
position: absolute;
}
#ballContainer {
overflow: visible;
padding: 0;
position: absolute;
top: 0px;
}
#ball {
width: 15%;
height: auto;
position: absolute;
}
#lickLips {
visibility: hidden;
}
</style>
</head>
<body>
<div id="pupPage" class="fullWindow">
<div id="pupContainer">
<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" id="puppy" preserveaspectratio="xMidYMid meet" version="1.1" viewbox="0 0 1400 1200" x="0" xml:space="preserve" y="0">
<g id="head">
<path d="M706.5 961.039c-22.283 0-153.958-0.445-244.084-202.78-20.928-46.983-77.248-102.544-115.23-158.555-94.23-138.96 159.99-370.457 358.711-370.457s455.149 231.497 360.919 370.457c-38.468 56.728-109.35 112.377-130.726 159.667C842.621 966.153 728.783 961.039 706.5 961.039z"
fill="#A36134" />
<path d="M571.196 809.351c-6.518 0.023-12.322 4.116-14.526 10.25-4.614 12.84-12.437 34.411-16.464 44.405-2.827 7.013-1.279 14.991 3.871 20.528 35.395 38.058 75.739 60.933 110.934 77.174 30.693 14.164 79.188 12.62 108.88-3.538 27.579-15.008 56.133-33.07 82.117-61.701 7.178-7.91 10.247-18.757 8.351-29.268-2.76-15.295-8.526-35.466-12.243-47.77-1.981-6.558-8.037-11.028-14.888-11.003L571.196 809.351z"
fill="#CECBC8" id="mouth" />
<g id="tongue">
<path d="M622.419 797.626C612.108 721.94 656.605 665 700 665s89.437 54.98 79.566 132.626c-10.913 85.84-19.932 116.306-72.204 126.24C663.255 932.249 633.332 877.727 622.419 797.626z" fill="#B66F81" stroke="#BF8AA0" stroke-miterlimit="10" stroke-width="12.3134"
/>
<line fill="none" stroke="#996B7A" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5.6864" x1="705.295" x2="703" y1="925.736" y2="666" />
</g>
<g id="eyes">
<g id="eyeR">
<path d="M828.824 472.628c-55.683 1.457-69.248 40.187-69.384 93.239-0.125 53.052 45.379 90.412 93.504 79.67 46.248-10.323 81.77-40.541 114.216-42.314C942.011 537.279 883.264 471.204 828.824 472.628z" fill="#915B36" />
<path d="M759.44 565.867c-51.145-178.482 165.719-142.997 207.721 37.356C913.849 531.552 798.095 422.232 759.44 565.867z" fill="#824020" id="browR" />
<defs>
<path d="M909.199 564.535c-6.265 38.243-71.507 99.489-123 7.266C808.113 465.752 895.154 530.453 909.199 564.535z" id="eyePathR" />
</defs>
<clippath id="eyeClipPathR">
<use overflow="visible" xlink:href="#eyePathR" />
</clippath>
<g clip-path="url(#eyeClipPathR)" id="eyeBallR">
<ellipse cx="847.887" cy="564.931" fill="#EBEDEC" rx="75" ry="69" transform="matrix(0.9848 0.1736 -0.1736 0.9848 110.9805 -138.6515)" />
<circle class="eyeMove" cx="846.591" cy="572.279" fill="#3A3533" r="50" />
<circle class="catchLight" cx="834.424" cy="554.902" fill="#EBEDEC" id="eyeHighlightR" r="12.5" />
</g>
</g>
<g id="eyeL">
<path d="M577.176 472.639c-54.44-1.424-107.99 57.509-133.139 123.453 25.165 0 66.771 39.133 113.019 49.456 48.126 10.742 90.364-26.619 90.239-79.67C647.158 512.826 632.859 474.095 577.176 472.639z" fill="#915B36" />
<path d="M647.294 565.877c-35.486-146.146-151.893-38.917-203.258 30.214C501.497 405.127 684.118 393.443 647.294 565.877z" fill="#824020" id="browL" />
<defs>
<path d="M495.996 559.698c0.347 36.965 66.521 110.993 123.146 14.615C605.682 470.425 510.042 525.615 495.996 559.698z" id="eyePathL" />
</defs>
<clippath id="eyeClipPathL">
<use overflow="visible" xlink:href="#eyePathL" />
</clippath>
<g clip-path="url(#eyeClipPathL)" id="eyeBallL">
<ellipse cx="557.93" cy="564.868" fill="#EBEDEC" rx="75" ry="69" transform="matrix(0.9848 -0.1736 0.1736 0.9848 -89.6121 105.4651)" />
<circle cx="559.225" class="eyeMove" cy="572.216" fill="#3A3533" r="50" />
<circle cx="546.773" class="catchLight" cy="559.181" fill="#EBEDEC" id="eyeHighlightL" r="12.5" />
</g>
</g>
</g>
<defs>
<path id="headClipPath" d="M706.5 961.039c-22.283 0-153.958-0.445-244.084-202.78-20.928-46.983-77.248-102.544-115.23-158.555-94.23-138.96 159.99-370.457 358.711-370.457s455.149 231.497 360.919 370.457c-38.468 56.728-109.35 112.377-130.726 159.667C842.621 966.153 728.783 961.039 706.5 961.039z"
/>
</defs>
<clippath id="snoutClip">
<use overflow="visible" xlink:href="#headClipPath" />
</clippath>
<g clip-path="url(#snoutClip)">
<g id="snout">
<path d="M701.957 835.582c40.743 0 134.456 33.541 134.456 33.541-41.232 43.848-97.719 12.061-130.517 12.061s-91.473 32.53-135.316-10.119C570.58 871.065 661.214 835.582 701.957 835.582z" fill="#333333" opacity="0.3" />
<path d="M700.335 843.364c0 0-170.424 100.401-161.526-49.46 1.736-29.244 15.441-89.823 38.568-108.429 61.796-49.716 60.564-55.858 69.918-108.376 5.498-30.87 10.561-108.066 11.628-139.499 2.625-77.29-18.333-176.507-13.459-181.625 5.534-5.811 23.882-17.79 56.939-8.982 3.858 1.028 16.328 4.62 20.255 3.901 91.765-16.789 35.654 66.98 31.496 170.131-1.154 28.633 0.189 111.831 2.095 140.071 4.934 73.091 28.226 86.903 82.758 137.069 19.993 18.392 26.146 79.304 26.293 101.373C866.266 944.343 700.335 843.364 700.335 843.364z"
fill="#EBEDEC" />
</g>
</g>
<g id="nose">
<path d="M695.381 805.018c4.192 1.964 9.047 1.964 13.239 0 27.135-12.712 46.44-27.847 50.438-35.71 0.993-1.953 0.265-5.856-0.905-9.709-1.771-5.829-0.06-12.151 4.489-16.205 4.604-4.102 9.359-10.378 9.359-18.799 0-16.093-3.278-46.595-70-46.595s-70 30.502-70 46.595c0 8.421 4.755 14.697 9.359 18.799 4.549 4.053 6.259 10.375 4.489 16.205-1.17 3.853-1.898 7.756-0.905 9.709C648.941 777.17 668.245 792.306 695.381 805.018z"
fill="#3A3533" />
<line fill="none" stroke="#161313" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" x1="701.5" x2="701.5" y1="708" y2="805" />
<path d="M701.888 712.276c30.157 0 45.835 6.574 52.582 12.374 4.286 3.685 7.874-0.377 7.371-4.228-0.493-3.781-8.38-19.162-60.361-19.162s-59.053 16.163-59.546 19.944c-0.503 3.851 3.2 7.131 7.487 3.446C656.168 718.85 671.731 712.276 701.888 712.276z" fill="#827E7C"
id="noseHighlight" />
<g id="nostrilL" class="nostrils">
<circle cx="737" cy="745" fill="#0C0B0B" r="20" />
<path d="M756.083 750.96c-0.631 0.881-1.321 1.734-2.113 2.525-7.81 7.81-20.474 7.811-28.284 0-5
