TweenMax+snap.svg实现蝙蝠变身吸血鬼动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：TweenMax+snap.svg实现蝙蝠变身吸血鬼动画效果代码

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

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

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

</head>

<body>

  
    <div class="info">点击变身</div>
    <div id="container"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 289.33 333.89" preserveAspectRatio="true"><defs><linearGradient id="linear-gradient" x1="148.12" x2="148.12" y1="262.83" y2="328.76" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#151a0c" /><stop offset="1" stop-color="#2e2b40" stop-opacity="0" /></linearGradient><linearGradient id="linear-gradient-2" x1="127.92" x2="171.82" y1="135.57" y2="91.67" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3e8c3" /><stop offset="1" stop-color="#b4a373" /></linearGradient><linearGradient id="linear-gradient-3" x1="8.87" x2="43.29" y1="27.47" y2="27.47" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#566082" /><stop offset="1" stop-color="#474650" /></linearGradient><linearGradient id="linear-gradient-4" x1="53.39" x2="84.82" y1="30.5" y2="30.5" xlink:href="#linear-gradient-3" /><linearGradient id="linear-gradient-5" x1="94.92" x2="127.01" y1="28.45" y2="28.45" xlink:href="#linear-gradient-3" /><linearGradient id="linear-gradient-6" x1="126.89" x2="133.39" y1="145.97" y2="139.47" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3e8c3" /><stop offset="1" stop-color="#786a67" /></linearGradient><linearGradient id="linear-gradient-7" x1="152.47" x2="158.98" y1="146.47" y2="139.96" gradientTransform="matrix(-.98 0 0 1 313.33 0)" xlink:href="#linear-gradient-6" /><path id="smoke-2" d="M6,9s.2-9,5.58-9,7.11,2.88,7.11,2.88,3.73-4.62,10.5,3.19,1.85,9,1.85,9,6.7,6.09,1.16,11.26-13.08,8.15-18.93,4.25A9,9,0,0,1,9.4,21.83S3,26.48.74,20.39C-2.51,11.53,6,9,6,9Z" style="fill: url(#linear-gradient)" /><path id="smoke-1" d="M7.16,10.55S6,8,9.52,3.92c3.73-4.32,8.39-.05,8.39-.05s10.6-7.15,10.5,3.19a16.12,16.12,0,0,1-3,8.89s11.54,6.19,6,11.36-8.75,3.24-14.25,3.24a9.94,9.94,0,0,1-8.49-4.7s-4.19,0-6.42-6.07C-1,10.91,7.16,10.55,7.16,10.55Z" style="fill: url(#linear-gradient-2)" /><path id="smoke-0" d="M6.83,9.56S5.72,6.34,11,5.53c7.21-1.09,6.17,2.94,6.17,2.94S19.89-.23,28.08,6.07c5.17,4,1.69,9.13,1.69,9.13s6.86,6,1.32,11.13-8.39-.18-13.88-.18c-5.92,0-8.86-1.28-8.86-1.28s-4.19,0-6.42-6.07C-1.32,9.92,6.83,9.56,6.83,9.56Z" style="fill: url(#linear-gradient-3)" /></defs><ellipse id="shadow" cx="0" cy="0" rx="69.07" ry="21.69" style="fill: #000000" /><g id="vampire"><!-- <path id="shadow" fill="url(#linear-gradient)" d="M93.59 262.83l-28.45 65.93H231.1l-29.81-64.12-107.7-1.81z" opacity=".25"/>--><path id="collar" fill="#9e1d20" d="M89.35 111.33s35.47-15.88 55.89-15.88c20.89 0 54.06 11.07 54.06 11.07s-28.79 11.17-31.5 36.9c-2 19.09-44.52 20.78-46.27.69-2.3-26.37-32.18-32.78-32.18-32.78z" /><path id="cloak-back" d="M128.43 130.11a1.61 1.61 0 0 1 1.64-2h35.42s8.7 0 9.31 4.44c.84 6.08 5.6 111.26 24.19 128.1s-81.41 9.67-86.18-2.51 14.71-81.1 16.06-99.71-.44-28.32-.44-28.32z" /><g id="arm"><g id="hand"><g id="finger-4"><path fill="#f3e8c3" d="M232.39 120.24s2.92-3.57 4-3.48a12.08 12.08 0 0 0 4.77-.23c1.77-.5 1.34 1.77 1.34 1.77s-2 2.09-4 1.71-4.84 1.86-4.84 1.86z" /><g fill="#b4a373"><path d="M242.46 118.3a3.27 3.27 0 0 0 0-.37 5 5 0 0 1-2.39 1 13.74 13.74 0 0 1-3.6 0c-1.09 0-2.39 1.9-3 2.84l.06.08s2.87-2.24 4.84-1.86 4.09-1.69 4.09-1.69z" /><path d="M242.46 118.3a3.27 3.27 0 0 0 0-.37 5 5 0 0 1-2.39 1 13.74 13.74 0 0 1-3.6 0c-1.09 0-2.39 1.9-3 2.84l.06.08s2.87-2.24 4.84-1.86 4.09-1.69 4.09-1.69z" /></g></g><path id="palm" fill="#f3e8c3" d="M217.58 122.57a39.56 39.56 0 0 1 8.62-3.45c2.82-.66 2.44-2 7-2.14 1.59-.05 3.22 1.77 3.22 5.59s0 9.06-7.8 6c-2.29-.88-3.27 8.46-10.27 1-2.61-2.81-.77-7-.77-7z" /><g id="finger-3"><path fill="#f3e8c3" d="M231.86 121.93a1.38 1.38 0 0 1 .86-1.53c1.6-.62 4.55-1.64 5.34-1.16a15.12 15.12 0 0 0 5.4 2.34c1.57.29 1.17 1.46.78 2.14a1.36 1.36 0 0 1-.87.64c-1 .25-3.39.64-4.87-.48-1.29-1-3.68-.94-5.15-.8a1.39 1.39 0 0 1-1.5-1.14z" /><path fill="#b4a373" d="M240.83 123.76c-1.59-.35-1.78-1-3.26-1.45-1.15-.35-3.72.35-4.81.67a1.37 1.37 0 0 0 .61.09c1.47-.14 3.86-.18 5.15.8 1.48 1.12 3.82.73 4.87.48a1.36 1.36 0 0 0 .87-.64l.1-.2c-.9.67-2.03.58-3.53.25z" /></g><g id="finger-2"><path fill="#f3e8c3" d="M232.36 122.92s6.73-1.29 7.86-.27a18.11 18.11 0 0 0 5.75 4c2.53 1-.11 3.11-.11 3.11s-4.31.48-6.24-1.68-7.36-2.27-7.36-2.27z" /><path fill="#b4a373" d="M230.53 126.28a7.56 7.56 0 0 1 5-1.22c3 .28 5.32 2.52 6.62 3.31a7.92 7.92 0 0 0 4 1.1c-4.65 1.78-7.21-3.25-11.62-3.25-1.53 0-4 .06-4 .06z" /></g><path id="finger-1" fill="#f3e8c3" d="M229.51 125.71s5.67-1.89 6.66-.68a16.14 16.14 0 0 0 5 4.65c2.18 1.15 0 3.84 0 3.84s-3.64.78-5.34-1.8-6.93-3.78-6.93-3.78z" /><g id="thumb"><path fill="#f3e8c3" d="M220.8 129.4l2 4a5.44 5.44 0 0 0 1.9 2.18 5 5 0 0 1 2 2.76c.67 2.14 2.24 2.12 3.71 1.36a3.19 3.19 0 0 0 .65-5c-1.69-1.71-5.33-6.33-5.33-6.33z" /><path fill="#b4a373" d="M229 139.32a3.53 3.53 0 0 0 1-4.32 2.85 2.85 0 0 0-.51-.73c-2.83-2.84-2.83-4.75-2.83-4.75a48.39 48.39 0 0 0 4.36 5.14c1.86 2 .59 5.31-1.61 5.3-.99.04-.87-.3-.41-.64z" /></g><path id="shadow-2" fill="#b4a373" d="M217.58 122.57l3.45-1.67s1 1 1.47 4.38a16.76 16.76 0 0 1-.82 6.9l-2.15.81z" data-name="shadow" /></g><rect id="shirt" width="13.05" height="18.27" x="208.15" y="120.03" fill="#e8e8e8" rx="3.89" ry="3.89" transform="rotate(-5 214.68 129.19)" /><path id="upper-arm" fill="#212121" d="M161.19 133.69l17.19-7.86c1.37-.57 8.17-3.4 9.65-3.35 2.66.1 7.85 1.84 9.19 5.65A11.61 11.61 0 0 1 192.6 142c-2 1.23-3.86 2.34-6 3.94-1.34 1-8.95 5.32-14.87 9.09a10.43 10.43 0 0 1-15.4-5.07l-.08-.22a38 38 0 0 1-1.21-4.17 10.41 10.41 0 0 1 6.15-11.88z" /><path id="lower-arm" fill="#212121" d="M209.8 120.27l-21.8 2.22s-7 .78-5.37 11.78 10.67 8.65 10.67 .........完整代码请登录后点击上方下载按钮下载查看