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 8.65l18.78-1.69s4.15.83 5.21-5.41.81-9.76-1.25-13.2-6.24-2.35-6.24-2.35z" /></g><g id="body"><path fill="#212121" d="M123.68 129.85c-2.48 1.1-2.13 7.14-4.91 12.41a18 18 0 0 0-1.87 9.15c.63 22.2-16.68 49.14-4.37 64.27 2 2.43 4.09 3.63 8.32 6 20.38 11.57 49.91 9.24 56.58-3.74a14.4 14.4 0 0 0 1.46-7.07c-.44-26.41-7.05-37.55-4.58-60.32a15.61 15.61 0 0 0-4.95-12.81c-11.26-10.8-31.42-14.21-45.68-7.89z" /><rect width="27.6" height="21.71" x="131.36" y="142.43" fill="#e8e8e8" rx="5.33" ry="5.33" /><rect width="27.6" height="21.71" x="131.36" y="134.34" fill="#a9a8a9" rx="5.33" ry="5.33" /><ellipse cx="145.18" cy="137.06" rx="19.51" ry="7.5" /></g><g id="head"><g id="face"><path fill="#f3e8c3" d="M173.35 103.45c-2.57-16.17-14.5-28.4-28.85-28.4s-26.14 12.08-28.8 28.1a7.6 7.6 0 0 0-3.41 6.33v3.75a7.61 7.61 0 0 0 4.09 6.72 35.31 35.31 0 0 0 11.34 18.63v2c0 6.6 5.09 12 11.31 12h11c6.22 0 11.31-5.4 11.31-12v-2a35.36 35.36 0 0 0 11.4-18.87 7.6 7.6 0 0 0 3.67-6.48v-3.75a7.58 7.58 0 0 0-3.06-6.03z" /><path fill="url(#linear-gradient-2)" d="M176.36 113.24v-3.75a7.58 7.58 0 0 0-3-6c-2.54-16-14.28-28.16-28.45-28.39v25.73l5.47-.45-5.5 1.81v1.95l8.12-.94-8.12 2.61v5.81l8.12-.46-4.38 2-1.72 10.59s1.18 4.67 1.18 5.54c-1.22.64-3.19.74-3.2 1.86s0 4.53 0 4.53l3.42.81-3.42.93v15.12H150c6.22 0 11.31-5.4 11.31-12v-2a35.36 35.36 0 0 0 11.4-18.87 7.6 7.6 0 0 0 3.65-6.43z" /></g><g id="eye-left"><ellipse cx="131.76" cy="112.35" fill="#414042" rx="11.15" ry="10" /><ellipse id="left-eye-white" cx="130.91" cy="111.59" fill="#fff" rx="10.42" ry="9.24" /><circle id="left-eye-pupil" cx="130.91" cy="111.59" r="4.37" fill="#414042" /></g><g id="eye-right"><ellipse cx="157.98" cy="112.35" fill="#414042" rx="11.15" ry="10" /><ellipse id="right-eye-white" cx="158.52" cy="111.59" fill="#fff" rx="10.42" ry="9.24" /><circle id="right-eye-pupil" cx="158.67" cy="111.59" r="4.37" fill="#414042" /></g><g id="mouth"><path fill="#b4a373" d="M139.69 145.26l3.3-7.74h-6.61l3.31 7.74zm7.36-7.74l3.31 7.74 3.31-7.74h-6.62z" /><path fill="#fff" d="M138.26 144.82l3.31-7.73h-6.62l3.31 7.73zm7.36-7.73l3.31 7.73 3.31-7.73h-6.62z" /><path fill="none" stroke="#414042" stroke-miterlimit="10" d="M132.36 133.7a3.19 3.19 0 0 0 2.85 3.38h18.87a3.64 3.64 0 0 0 2.17-3.38" /></g><path id="nose" fill="#414042" d="M146.92 123.76l-.59-12.76a4.13 4.13 0 0 1 3.24-4.58h.06m-9.11 22.88a12.31 12.31 0 0 0 3.9.89 10.36 10.36 0 0 0 3.68-.89 5 5 0 0 1-3.68 2 5.76 5.76 0 0 1-3.9-2z" /><g id="brow"><path fill="#414042" d="M144.3 113.8c-12.39-.06-24.69-6.79-24.16-10.63.42-3.1 9.16-4.36 17.26-5.52 10-1.45 16.44-.36 18.36 0 5.15 1 12.75 2.39 13.12 5.38.49 3.97-12 10.83-24.58 10.77z" /><path fill="#f3e8c3" d="M168.16 104.13a3.08 3.08 0 0 0 .71-2.1 1.88 1.88 0 0 0-.09-.33c.31-5.6-5.36-14.2-12.15-14.71-5.36-.4-10.69 4.3-12.38 9-2 .1-4.34.3-6.86.66-8.1 1.17-16.84 2.43-17.26 5.52-.52 3.84 11.77 9.58 24.16 9.63 7.71 0 15.38-1.52 20.06-4.42a7.59 7.59 0 0 0 3.81-3.25z" /><path fill="#b4a373" d="M134.07 99c.89.24 1.78.49 2.68.68s1.79.4 2.7.56a30.78 30.78 0 0 0 5.47.53 24.31 24.31 0 0 0 2.75-.09c.92-.08 1.82-.23 2.73-.36s1.8-.34 2.69-.57 1.77-.47 2.65-.75a27.73 27.73 0 0 1-10.85 2.22 28.52 28.52 0 0 1-5.6-.66 35.21 35.21 0 0 1-5.29-1.49z" /><path fill="#b4a373" d="M126.57 100.87c1.39.49 2.76 1 4.17 1.37s2.79.81 4.2 1.13a37.22 37.22 0 0 0 8.51 1.08 29.13 29.13 0 0 0 4.27-.19c1.42-.15 2.82-.47 4.24-.73a38.49 38.49 0 0 0 4.18-1.14 39.5 39.5 0 0 0 4.11-1.51l.05.09a35.1 35.1 0 0 1-8.15 3.32 32.57 32.57 0 0 1-8.72 1.17 34.64 34.64 0 0 1-8.7-1.32 45.7 45.7 0 0 1-8.22-3.16z" /></g><g id="hair"><path fill="#212121" d="M171.67 105.87a4.48 4.48 0 0 1 2.07.93C172.4 89 159.83 75.06 144.5 75.06c-15.1 0-27.53 13.55-29.17 31a4.39 4.39 0 0 1 1.62-.86v-.17a27.37 27.37 0 0 1 5.69-11c2.13-2.46 4.92-4.73 8.23-5.28 7.94-1.34 13.59 8.2 13.59 8.2s5.75-8 13-8.15c3.68-.1 6.93 2.89 9.24 5.85a25.11 25.11 0 0 1 4.65 10c.15.35.23.79.32 1.22z" /><path fill="#53505e" d="M144.5 96.92c-.76-7.52-5.09-15.48-11.14-16.57a9.78 9.78 0 0 0-5 .49c-7.07 5.57-12 14.67-13 25.19a4.39 4.39 0 0 1 1.62-.86V105a27.37 27.37 0 0 1 5.69-11c2.13-2.46 4.92-4.73 8.23-5.28 7.96-1.34 13.6 8.2 13.6 8.2z" /><path fill="#b0b0b0" d="M144.45 96.92c-.29-1.1-.58-2.19-1-3.24a24.83 24.83 0 0 0-1.2-3.1c-.45-1-.92-2-1.46-2.94-.28-.46-.57-.93-.87-1.37s-.63-.88-1-1.3a17.88 17.88 0 0 0-2.15-2.4 11.63 11.63 0 0 0-2.59-1.74 6.44 6.44 0 0 0-3-.59 6.94 6.94 0 0 0-3.13.87L128 81a6.78 6.78 0 0 1 6.5-.9 12.86 12.86 0 0 1 5.26 4.23 21.7 21.7 0 0 1 3.24 5.98 25.59 25.59 0 0 1 1.53 6.61z" /></g></g><g id="cloak"><path id="material" d="M31.15,60.34s7.38,30.7,33.67,25C76.85,82.69,81,94.46,81,94.46l27,103.33s-8.82,5.39-25.48,5.39c-21.79,0-13.47-1.11-20.29-5.39s-34.91,0-34.91,0-25.76-2.1-23.08-10c7.39-21.86,19.33-109.26,18.7-118.26S31.15,60.34,31.15,60.34Z" /><path id="cloak-line-2" fill="#53505e" d="M150.08 199.42l-2.53 72.09a11.7 11.7 0 0 1 4 1.33c3.48 2.18 3 3.54 4.63 4.35z" opacity=".5" /><path id="cloak-line-1" fill="#212121" d="M116.67 272.84s4.15-.63 9.65-1.17l.64-96.63-10.71 97.76z" /></g></g><g id="transform-lines" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10"><path id="line-9" d="M126 54.54c-8.83 87.81-7 140.46-3.13 173.19.42 3.6 4.33 36.44-5.34 40-7.4 2.73-13.91-14.91-32.4-18.15-18.28-3.2-27.26 11.35-40.83 5.18-8.11-3.68-15.43-13.65-13-22 2.3-7.8 12.66-12.82 20.09-11" /><path id="line-8" d="M149.17 44.87c13.8 124.65 15 172.79 11.66 187.93-.43 2-2.21 9.2 1.31 15.72C168 259.3 184.31 260.91 197 262c18.13 1.55 48.16 4.11 61.71-14.28 1.05-1.43 10.46-14.55 4.54-24-4-6.34-13.69-9.09-24-6.48" /><path id="line-7" d="M132.25 49.6c-7.25 102.75-2.39 142.59 3.88 159.4 1.82 4.89 9.68 23.71 1.3 38.88a30 30 0 0 1-9.72 10.37c-23.84 15.16-71.85-9.11-71.29-24.63.15-4 3.63-8.49 7.78-9.72 7.51-2.23 15.19 6.7 15.55 7.13" /><path id="line-6" d="M142.69 37c-3.08 106.24-4.81 182.69-3.89 207.37a50.32 50.32 0 0 1-2.59 17.5c-7.32 21.94-30.09 39-39.53 34.35-4.43-2.16-6.49-9.37-5.83-14.91A18 18 0 0 1 96 270.93" /><path id="line-5" d="M140.23 65.22c13.71 56.9 12.78 92.1 9.07 114.06-4.17 24.73-2.78 40.68 0 72.58a46.26 46.26 0 0 0 3.89 15.55c9.52 21.09 32.51 27.55 33.7 27.87 18.91 5 34.38-2.52.........完整代码请登录后点击上方下载按钮下载查看