TweenMax+svg实现从天而降购物车礼品盒购物袋立体动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：TweenMax+svg实现从天而降购物车礼品盒购物袋立体动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

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

</head>

<body>
 <svg class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="455.66" height="321.81" viewBox="0 -200 455.66 521.81"><defs><linearGradient id="linear-gradient" x1="57.34" y1="319.97" x2="414.09" y2="319.97" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#545770" /><stop offset=".1" stop-color="#50536b" /><stop offset=".3" stop-color="#4e5168" /><stop offset=".38" stop-color="#464960" /><stop offset=".59" stop-color="#353850" /><stop offset=".74" stop-color="#2f324a" /><stop offset="1" stop-color="#20233d" /></linearGradient><clipPath id="clip-path" transform="translate(-57.34 -66.85)"><path d="M355.05 182.39c-78.72-45.44-160-45.44-238.67 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.72 45.45 160 45.45 238.67 0 39.36-22.72 59-45.81 59-68.9s-19.64-46.17-59-68.9z" fill="none" /></clipPath><radialGradient id="radial-gradient" cx="158.8" cy="118.98" r="177.12" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c90000" /><stop offset="1" stop-color="#730000" /></radialGradient><radialGradient id="radial-gradient-2" cx="62.46" cy="91.13" r="186.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff2d9" /><stop offset=".01" stop-color="#ffddb7" /><stop offset=".03" stop-color="#ffc28d" /><stop offset=".06" stop-color="#ffaa67" /><stop offset=".08" stop-color="#ff9647" /><stop offset=".11" stop-color="#ff862d" /><stop offset=".13" stop-color="#ff7a19" /><stop offset=".17" stop-color="#ff710b" /><stop offset=".21" stop-color="#ff6c02" /><stop offset=".27" stop-color="#ff6a00" /><stop offset="1" stop-color="#e81e00" /></radialGradient><radialGradient id="radial-gradient-3" cx="191.66" cy="114.26" r="248.23" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d70000" /><stop offset="1" stop-color="#8a0000" /></radialGradient><radialGradient id="radial-gradient-4" cx="60.36" cy="57.85" r="196.21" xlink:href="#radial-gradient-2" /><radialGradient id="radial-gradient-5" cx="55.5" cy="74.89" r="206.19" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff9a42" /><stop offset="1" stop-color="#ff543d" /></radialGradient><linearGradient id="linear-gradient-2" x1="197.2" y1="186.6" x2="215.55" y2="154.83" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffe98d" /><stop offset="1" stop-color="#ff9e48" /></linearGradient><linearGradient id="linear-gradient-3" x1="279.61" y1="94.21" x2="282.08" y2="89.92" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb05c" /><stop offset=".15" stop-color="#ffa152" /><stop offset=".38" stop-color="#ff9147" /><stop offset=".64" stop-color="#ff8840" /><stop offset="1" stop-color="#ff853e" /></linearGradient><linearGradient id="linear-gradient-4" x1="243.41" y1="143.26" x2="279.97" y2="79.93" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb763" /><stop offset=".05" stop-color="#ffc26f" /><stop offset=".15" stop-color="#ffde8d" /><stop offset=".16" stop-color="#ffe292" /><stop offset=".29" stop-color="#ffc471" /><stop offset=".36" stop-color="#ffb763" /><stop offset=".47" stop-color="#ffc771" /><stop offset=".64" stop-color="#ffda80" /><stop offset=".81" stop-color="#ffe58a" /><stop offset="1" stop-color="#ffe98d" /></linearGradient><linearGradient id="linear-gradient-5" x1="202.74" y1="110.93" x2="229.36" y2="157.04" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff7529" /><stop offset=".15" stop-color="#ff7b2e" /><stop offset=".36" stop-color="#ff8c3d" /><stop offset=".59" stop-color="#ffa855" /><stop offset=".7" stop-color="#ffb763" /><stop offset=".92" stop-color="#ffb460" /><stop offset="1" stop-color="#ffb05c" /></linearGradient><linearGradient id="linear-gradient-6" x1="206.59" y1="99.51" x2="242.91" y2="162.41" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffe98d" /><stop offset=".2" stop-color="#ffd37b" /><stop offset=".41" stop-color="#ffc36d" /><stop offset=".66" stop-color="#ffba65" /><stop offset="1" stop-color="#ffb763" /></linearGradient><linearGradient id="linear-gradient-7" x1="258.03" y1="153.89" x2="267.51" y2="170.32" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffe186" /><stop offset=".11" stop-color="#ffd77f" /><stop offset=".35" stop-color="#ffc774" /><stop offset=".62" stop-color="#ffbe6e" /><stop offset="1" stop-color="#ffbb6c" /></linearGradient><linearGradient id="linear-gradient-8" x1="250.59" y1="132.63" x2="261.66" y2="151.79" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff762c" /><stop offset=".24" stop-color="#ff7c31" /><stop offset=".56" stop-color="#ff8d3f" /><stop offset=".92" stop-color="#ffa956" /><stop offset="1" stop-color="#ffb05c" /></linearGradient><linearGradient id="linear-gradient-9" x1="264.24" y1="116.11" x2="292.34" y2="164.77" xlink:href="#linear-gradient-6" /><clipPath id="clip-path-2" transform="translate(-57.34 -66.85)"><path d="M355.06 183.26c-78.67-45.58-159.93-45.71-238.74-.38-39.4 22.67-59.13 45.73-59.16 68.82s19.61 46.22 58.94 69c78.67 45.59 159.93 45.72 238.74.39 39.4-22.67 59.12-45.73 59.16-68.83s-19.61-46.21-58.94-69z" fill="none" /></clipPath><linearGradient id="linear-gradient-10" x1="155.12" y1="253.27" x2="175.63" y2="217.75" gradientTransform="translate(6.26 -.54)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c0300" /><stop offset=".26" stop-color="#462a00" /><stop offset=".45" stop-color="#4c3006" /><stop offset=".7" stop-color="#5c4015" /><stop offset=".9" stop-color="#593e13" /><stop offset="1" stop-color="#543b0f" /></linearGradient><linearGradient id="linear-gradient-11" x1="171.01" y1="251.81" x2="182.29" y2="232.27" xlink:href="#linear-gradient-10" /><linearGradient id="linear-gradient-12" x1="202.97" y1="225.38" x2="223.48" y2="189.85" xlink:href="#linear-gradient-10" /><linearGradient id="linear-gradient-13" x1="218.86" y1="223.91" x2="230.14" y2="204.38" xlink:href="#linear-gradient-10" /><linearGradient id="linear-gradient-14" x1="221.7" y1="293.51" x2="242.21" y2="257.98" xlink:href="#linear-gradient-10" /><linearGradient id="linear-gradient-15" x1="237.59" y1="292.04" x2="248.86" y2="272.5" xlink:href="#linear-gradient-10" /><linearGradient id="linear-gradient-16" x1="269.55" y1="265.61" x2="290.06" y2="230.09" xlink:href="#linear-gradient-10" /><linearGradient id="linear-gradient-17" x1="285.43" y1="264.15" x2="296.71" y2="244.61" xlink:href="#linear-gradient-10" />
 <radialGradient id="radial-gradient-6" cx="225.93" cy="217.78" r="61.91" gradientTransform="translate(-51.08 -67.39)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#eee" /><stop offset=".87" stop-color="#ebebeb" /><stop offset="1" stop-color="#eaeaea" /></radialGradient><radialGradient id="radial-gradient-7" cx="291.21" cy="113.1" r="43.12" xlink:href="#radial-gradient-6" /><linearGradient id="linear-gradient-18" x1="259.42" y1="128.48" x2="271.14" y2="148.78" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0085ff" /><stop offset=".55" stop-color="#0083ff" /><stop offset=".75" stop-color="#007cff" /><stop offset=".89" stop-color="#0071ff" /><stop offset="1" stop-color="#0060ff" /></linearGradient><linearGradient id="linear-gradient-19" x1="198.71" y1="94.63" x2="206.42" y2="107.97" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0060ff" /><stop offset=".11" stop-color="#0071ff" /><stop offset=".25" stop-color="#007cff" /><stop offset=".45" stop-color="#0083ff" /><stop offset="1" stop-color="#0085ff" /></linearGradient><linearGradient id="linear-gradient-20" x1="506.82" y1="66.2" x2="470.69" y2="128.78" gradientTransform="matrix(-1 0 0 1 730.57 -.44)" xlink:href="#linear-gradient-18" /><clipPath id="clip-path-3" transform="translate(-57.34 -66.85)"><path d="M353.74 183.18c-78.23-45.17-159-45.17-237.19 0-39.12 22.58-58.68 45.53-58.68 68.47s19.56 45.89 58.68 68.48c78.23 45.16 159 45.16 237.19 0 39.12-22.59 58.67-45.53 58.67-68.48s-19.55-45.89-58.67-68.47z" fill="none" /></clipPath><radialGradient id="radial-gradient-8" cx="74.29" cy=".31" r="209.52" xlink:href="#radial-gradient-2" /><radialGradient id="radial-gradient-9" cx="206.52" cy="-31.25" r="125.89" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e3e3e3" /><stop offset=".2" stop-color="#e0e0e0" /><stop offset=".34" stop-color="#d7d7d7" /><stop offset=".46" stop-color="#c7c7c7" /><stop offset=".57" stop-color="#b1b1b1" /><stop offset=".67" stop-color="#959595" /><stop offset=".77" stop-color="#727272" /><stop offset=".87" stop-color="#484848" /><stop offset=".96" stop-color="#191919" /><stop offset="1" /></radialGradient><radialGradient id="radial-gradient-10" cx="228.61" cy="4322.55" r="8.4" gradientTransform="rotate(-120 -999.525 2248.483)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff0" /><stop offset=".11" stop-color="#fff800" /><stop offset=".28" stop-color="#ffe400" /><stop offset=".48" stop-color="#ffc300" /><stop offset=".7" stop-color="#ff9500" /><stop offset=".94" stop-color="#ff5b00" /><stop offset="1" stop-color="#ff4d00" /></radialGradient><radialGradient id="radial-gradient-11" cx="181.81" cy="4349.9" r="8.4" xlink:href="#radial-gradient-10" /></defs><title>loader </title><g style="isolation:isolate"><g style="mix-blend-mode:multiply"><path d="M393.66 149.92c-78.71-45.44-159.95-45.44-238.67 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.67 45.43 159.92 45.43 238.67 0 39.36-22.72 59-45.81 59-68.9s-19.68-46.17-59-68.9z" fill="#fcfcfc" opacity=".03" /><path d="M390.66 149.92c-78.72-45.44-160-45.44-238.68 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.68 45.43 159.93 45.43 238.68 0 39.36-22.72 59-45.81 59-68.9s-19.67-46.17-59-68.9z" fill="#f9f9f9" opacity=".061" /><path d="M387.66 149.92c-78.72-45.44-160-45.44-238.67 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.67 45.43 159.92 45.43 238.67 0 39.36-22.72 59-45.81 59-68.9s-19.67-46.17-59-68.9z" fill="#f5f5f5" opacity=".091" /><path d="M384.66 149.92c-78.72-45.44-160-45.44-238.67 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.67 45.43 159.93 45.43 238.67 0 39.36-22.72 59-45.81 59-68.9s-19.67-46.17-59-68.9z" fill="#f2f2f2" opacity=".121" /><path d="M381.66 149.92c-78.71-45.44-160-45.44-238.67 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.67 45.43 159.93 45.43 238.67 0 39.35-22.72 59-45.81 59-68.9s-19.67-46.17-59-68.9z" fill="#efefef" opacity=".152" /><path d="M378.66 149.92c-78.72-45.44-160-45.44-238.68 0-39.35 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.68 45.43 159.94 45.43 238.68 0 39.36-22.72 59-45.81 59-68.9s-19.66-46.17-59-68.9z" fill="#ececec" opacity=".182" /><path d="M375.66 149.92c-78.72-45.44-160-45.44-238.67 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.67 45.43 159.93 45.43 238.67 0 39.36-22.72 59-45.81 59-68.9s-19.66-46.17-59-68.9z" fill="#e8e8e8" opacity=".212" /><path d="M372.66 149.92c-78.72-45.44-160-45.44-238.67 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.67 45.43 159.94 45.43 238.67 0 39.36-22.72 59-45.81 59-68.9s-19.66-46.17-59-68.9z" fill="#e5e5e5" opacity=".242" /><path d="M369.66 149.92c-78.72-45.44-160-45.44-238.68 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.68 45.43 159.95 45.43 238.68 0 39.36-22.72 59-45.81 59-68.9s-19.66-46.17-59-68.9z" fill="#e2e2e2" opacity=".273" /><path d="M366.66 149.92c-78.72-45.44-160-45.44-238.68 0-39.35 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.68 45.43 159.95 45.43 238.68 0 39.36-22.72 59-45.81 59-68.9s-19.65-46.17-59-68.9z" fill="#dfdfdf" opacity=".303" /><path d="M363.66 149.92c-78.72-45.44-159.95-45.44-238.67 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.67 45.43 159.94 45.43 238.67 0 39.36-22.72 59-45.81 59-68.9s-19.65-46.17-59-68.9z" fill="#dbdbdb" opacity=".333" /><path d="M360.66 149.92c-78.71-45.44-159.95-45.44-238.67 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.67 45.43 159.95 45.43 238.67 0 39.36-22.72 59-45.81 59-68.9s-19.65-46.17-59-68.9z" fill="#d8d8d8" opacity=".364" /><path d="M357.66 149.92c-78.72-45.44-160-45.44-238.68 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.68 45.43 159.96 45.43 238.68 0 39.36-22.72 59-45.81 59-68.9s-19.64-46.17-59-68.9z" fill="#d5d5d5" opacity=".394" /><path d="M354.66 149.92c-78.72-45.44-160-45.44-238.67 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.67 45.43 159.95 45.43 238.67 0 39.36-22.72 59-45.81 59-68.9s-19.64-46.17-59-68.9z" fill="#d2d2d2" opacity=".424" /><path d="M351.66 149.92c-78.72-45.44-159.95-45.44-238.67 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.72 45.45 160 45.45 238.67 0 39.36-22.72 59-45.81 59-68.9s-19.64-46.17-59-68.9z" fill="#cecece" opacity=".455" /><path d="M348.66 149.92c-78.71-45.44-159.95-45.44-238.67 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.72 45.45 160 45.45 238.68 0 39.35-22.72 59-45.81 59-68.9s-19.65-46.17-59.01-68.9z" fill="#cbcbcb" opacity=".485" /><path d="M345.66 149.92c-78.72-45.44-160-45.44-238.68 0-39.35 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.72 45.45 160 45.45 238.68 0 39.36-22.72 59-45.81 59-68.9s-19.63-46.17-59-68.9z" fill="#c8c8c8" opacity=".515" /><path d="M342.66 149.92c-78.72-45.44-160-45.44-238.67 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.72 45.45 160 45.45 238.67 0 39.36-22.72 59-45.81 59-68.9s-19.63-46.17-59-68.9z" fill="#c5c5c5" opacity=".545" /><path d="M339.66 149.92c-78.72-45.44-159.95-45.44-238.67 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.72 45.45 160 45.45 238.67 0 39.36-22.72 59-45.81 59-68.9s-19.63-46.17-59-68.9z" fill="#c1c1c1" opacity=".576" /><path d="M336.66 149.92c-78.72-45.44-160-45.44-238.68 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.72 45.45 160 45.45 238.68 0 39.36-22.72 59-45.81 59-68.9s-19.63-46.17-59-68.9z" fill="#bebebe" opacity=".606" /><path d="M333.66 149.92c-78.72-45.44-160-45.44-238.68 0-39.35 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.71 45.45 160 45.45 238.67 0 39.36-22.72 59-45.81 59-68.9s-19.61-46.17-58.99-68.9z" fill="#bbb" opacity=".636" /><path d="M330.66 149.92c-78.72-45.44-159.95-45.44-238.67 0-39.36 22.73-59 45.81-59 68.9s19.68 46.18 59 68.9c78.72 45.45 160 45.45 238.67 0 39.36-22.72 59-45.81 59-68.9s-19.62-46.17-59-68.9z" fill=&q.........完整代码请登录后点击上方下载按钮下载查看