<!-- 引入 GASP TweenMax.min.js -->
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/1.20.2/TweenMax.min.js" type="application/javascript"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<style>
.st0{fill:#F8C6D0;} .st1{fill:none;stroke:#321334;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;} .st2{display:none;} .st3{display:inline;fill:none;stroke:#321334;stroke-width:3;stroke-miterlimit:10;} .st4{fill:none;stroke:#321334;stroke-width:3;stroke-miterlimit:10;} .st5{fill:#8CC159;} .st6{fill:#F28F60;} .st7{fill:#E72266;} .st8{fill:#A72668;} .st9{display:inline;fill:none;stroke:#321334;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;} .st10{display:inline;} .st11{fill:none;stroke:#321334;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;} .st12{fill:#321334;} .st13{fill:#321334;} .st14{fill:#FFFFFF;} .st15{fill:#FFCA00;} .st16{fill:#FBC793;} .st17{fill:#FFCA00;stroke:#FFCA00;stroke-width:3;stroke-miterlimit:10;}
</style>
<path id="Background_1_" class="st0" d="M0 0h500v500H0z"/>
<g id="burger">
<g id="arms">
<path id="arm-left" class="st1" d="M142,309.9c0-16.3,13.2-29.5,29.5-29.5"/>
<path id="arm-right" class="st1" d="M355,309.9c0-16.3-13.2-29.5-29.5-29.5"/>
<line id="arm-right-2" class="st1" x1="325.1" y1="280.3" x2="325.1" y2="341.2"/>
<line id="arm-left-2" class="st1" x1="171.6" y1="280.3" x2="171.6" y2="341.2"/>
<path id="arm-right-3" class="st1" d="M323.4,280.3h17.4c3.1,0,5.6,2.5,5.6,5.5v2.8c0,3-2.5,5.5-5.6,5.5h-19.7"/>
<path id="arm-left-3" class="st1" d="M175.7,280.3h-17.4c-3.1,0-5.6,2.5-5.6,5.5v2.8c0,3,2.5,5.5,5.6,5.5h19.7"/>
</g>
<g id="legs">
<g id="legs-after" class="st2">
<path class="st3" d="M271.2 368.2h-13.7s9.6-20.7 8.6-35.1c-.9-12.4-10.3-34.2-10.3-34.2M226.5 368.2h13.7s-9.6-20.7-8.6-35.1c.9-12.4 10.3-34.2 10.3-34.2"/>
</g>
<path id="leg-left" class="st1" d="M227.9,368.2 241.6,368.2 241.6,327.4 241.6,286.6 "/>
<path id="leg-right" class="st1" d="M270,368.2 256.3,368.2 256.3,327.5 256.3,286.9 "/>
<path id="leg-right-2" class="st1" d="M271.2,368.2h-13.7c0,0,9.6-20.7,8.6-35.1c-0.9-12.4-10.3-34.2-10.3-34.2"/>
<path id="leg-left-2" class="st1" d="M226.5,368.2h13.7c0,0-9.6-20.7-8.6-35.1c0.9-12.4,10.3-34.2,10.3-34.2"/>
</g>
<g id="salad">
<path id="salad-bg" class="st5" d="M170.1 270.8h156.7V289H170.1z"/>
<path class="st5" d="M182.8 273.3h.3c7 0 12.7 5.7 12.7 12.7v3c0 7-5.7 12.7-12.7 12.7h-.3c-7 0-12.7-5.7-12.7-12.7v-3c0-7 5.7-12.7 12.7-12.7zM313.8 273.3h.3c7 0 12.7 5.7 12.7 12.7v3c0 7-5.7 12.7-12.7 12.7h-.3c-7 0-12.7-5.7-12.7-12.7v-3c.1-7 5.8-12.7 12.7-12.7zM287.6 273.3h.3c7 0 12.7 5.7 12.7 12.7v3c0 7-5.7 12.7-12.7 12.7h-.3c-7 0-12.7-5.7-12.7-12.7v-3c0-7 5.7-12.7 12.7-12.7zM261.4 273.3h.3c7 0 12.7 5.7 12.7 12.7v3c0 7-5.7 12.7-12.7 12.7h-.3c-7 0-12.7-5.7-12.7-12.7v-3c0-7 5.7-12.7 12.7-12.7zM235.2 273.3h.3c7 0 12.7 5.7 12.7 12.7v3c0 7-5.7 12.7-12.7 12.7h-.3c-7 0-12.7-5.7-12.7-12.7v-3c0-7 5.7-12.7 12.7-12.7zM209 273.3h.3c7 0 12.7 5.7 12.7 12.7v3c0 7-5.7 12.7-12.7 12.7h-.3c-7 0-12.7-5.7-12.7-12.7v-3c0-7 5.7-12.7 12.7-12.7z"/>
</g>
<path id="bun-bottom" class="st6" d="M326.7 286.2c0 15.9-11.7 28.9-25.9 28.9H195.9c-14.3 0-25.9-13-25.9-28.9h156.7z"/>
<g id="burger-top"><path id="sauce" class="st7" d="M170.1 269.7h156.7v16.7H170.1z"/>
<g id="patty-group">
<path id="patty" class="st8" d="M321.9 274.6H175.3c-10.2 0-18.5-8.3-18.5-18.5v-2.4c0-10.2 8.3-18.5 18.5-18.5H322c10.2 0 18.5 8.3 18.5 18.5v2.4c-.1 10.2-8.4 18.5-18.6 18.5z"/>
<g id="face">
<g id="eyes-after">
<path id="eye-left-2" class="st9" d="M246.2 249.4c0-3.6-2.8-6.6-6.2-6.6h-1.5c-3.4 0-6.2 3-6.2 6.6"/>
<path id="eye-right-2" class="st10 st11" d="M265.9 249.4c0-3.6-2.8-6.6-6.2-6.6h-1.5c-3.4 0-6.2 3-6.2 6.6"/>
</g>
<path class="st12" id="eye-left" d="M232.4,249.2a6.9,6.9 0 1,0 13.8,0a6.9,6.9 0 1,0 -13.8,0"/>
<path id="eye-right" class="st12" d="
M252.1,249.2a6.9,6.9 0 1,0 13.8,0a6.9,6.9 0 1,0 -13.8,0"/>
<path id="mouth" class="st14" d="M256.6 262.4c0 4-3.2 7.2-7.2 7.2s-7.2-3.2-7.2-7.2h14.4z"/>
<path id="mouth-2" class="st13" d="M248.8,254.8h1.1c2.7,0,4.9,2.2,4.9,4.9v5c0,2.7-2.2,4.9-4.9,4.9h-1.1c-2.7,0-4.9-2.2-4.9-4.9v-5
C243.9,257,246.1,254.8,248.8,254.8z"/>
</g>
<g id="cheese">
<path class="st15" d="M206.3 266.8c-2.8 0-5.2-2.3-5.2-5.2v-25.3c0-2.8 2.3-5.2 5.2-5.2 2.8 0 5.2 2.3 5.2 5.2v25.3c-.1 2.9-2.4 5.2-5.2 5.2zM189.9 229.1c1.7 0 3.2 1.4 3.2 3.2V248c0 1.7-1.4 3.2-3.2 3.2-1.7 0-3.2-1.4-3.2-3.2v-15.7c.1-1.7 1.5-3.2 3.2-3.2z"/>
</g>
</g>
<g id="bun-top-group">
<path id="bun-top" class="st6" d="M170.1 235.5v-12.4c0-28.7 26.2-52.3 58.2-52.3H268c32 0 58.2 23.5 58.2 52.3v12.4"/>
<g id="sesame">
<path class="st16" d="M211.6 193.5l-7.1-6.4c-1.2-1-1.2-2.8 0-3.8l.7-.6c1.2-1 3.1-1 4.2 0l7.1 6.4c1.2 1 1.2 2.8 0 3.8l-.7.6c-1.1 1.1-3 1.1-4.2 0zM249.8 211.2l-7.1-6.4c-1.2-1-1.2-2.8 0-3.8l.7-.6c1.2-1 3.1-1 4.2 0l7.1 6.4c1.2 1 1.2 2.8 0 3.8l-.7.6c-1.1 1.1-3 1.1-4.2 0zM302.2 211.2l-7.1-6.4c-1.2-1-1.2-2.8 0-3.8l.7-.6c1.2-1 3.1-1 4.2 0l7.1 6.4c1.2 1 1.2 2.8 0 3.8l-.7.6c-1.1 1.1-3 1.1-4.2 0zM262.3 193.4l-6.4-5.7c-1.4-1.2-1.4-3.2 0-4.4 1.4-1.2 3.6-1.2 4.9 0l6.4 5.7c1.4 1.2 1.4 3.2 0 4.4-1.3 1.2-3.5 1.2-4.9 0zM198.6 211.2l-7.1-6.4c-1.2-1-1.2-2.8 0-3.8l.7-.6c1.2-1 3.1-1 4.2 0l7.1 6.4c1.2 1 1.2 2.8 0 3.8l-.7.6c-1.1 1.1-3 1.1-4.2 0zM281.8 189.1l7.1-6.4c1.2-1 3.1-1 4.2 0l.7.6c1.2 1 1.2 2.8 0 3.8l-7.1 6.4c-1.2 1-3.1 1-4.2 0l-.7-.6c-1.2-1-1.2-2.7 0-3.8zM229.4 189.1l7.1-6.4c1.2-1 3.1-1 4.2 0l.7.6c1.2 1 1.2 2.8 0 3.8l-7.1 6.4c-1.2 1-3.1 1-4.2 0l-.7-.6c-1.2-1-1.2-2.7 0-3.8zM216.5 206.8l7.1-6.4c1.2-1 3.1-1 4.2 0l.7.6c1.2 1 1.2 2.8 0 3.8l-7.1 6.4c-1.2 1-3.1 1-4.2 0l-.7-.6c-1.1-1-1.1-2.7 0-3.8zM268.9 206.8l7.1-6.4c1.2-1 3.1-1 4.2 0l.7.6c1.2 1 1.2 2.8 0 3.8l-7.1 6.4c-1.2 1-3.1 1-4.2 0l-.7-.6c-1.1-1-1.1-2.7 0-3.8z"/>
</g>
<path id="flag" class="st17" d="M248.1 157l38.3-13-38.3-12.2.6 38.7"/>
</g></g>
</g>
</svg>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
body {
margin: 0;
width: 100vw;
min-height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
background-color: #F8C6D0;
}
svg {
width:500px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
margin: 0;
position: absolute;
width:600px;
}
#leg-left-2, #leg-right-2, #arm-right-2, #arm-left-2,#arm-right-3, #arm-left-3 {
visibility:hidden;
}
#eyes-after, #mouth-2 {
opacity:0
}
var select = function(s) {
return document.querySelector(s);
},
bunBottom = select('#bun-bottom'),
patty = select('#patty'),
pattyGroup = select('#patty-group'),
face = select('#face'),
mouth = select('#mouth'),
mouth2 = select('#mouth-2'),
legLeft = select('#leg-left'),
legRight = select('#leg-right'),
burgerTop = select('#burger-top'),
salad = select('#salad'),
arms = select('#arms'),
bunTop = select('#bun-top-group'),
eyeLeft = select('#eye-left'),
eyeRight = select('#eye-right'),
eyes2 = select('#eyes-after'),
armLeft = select('#arm-left'),
armRight = select('#arm-right'),
speedTwo=0.1,
speedThree=1,
speedFour=0.5,
speedFive=0.6,
speedSix=0.4,
speedSeven=0.5,
speedEight=0.5
;
TweenMax.set("svg", {visibility:"visible"})
var masterTl = new TimelineMax({repeat:-1});
masterTl
.add(one())
.add(two())
.add(three())
.add(four())
.add(five())
.add(six())
.add(seven())
.add(eight());
function one() {
var tl = new TimelineMax();
tl.to(bunBottom, 0.8, {y:55, ease: Bounce.easeOut, delay:1}, "one")
return tl;
}
function two() {
var tl = new TimelineMax();
tl.to(legLeft, speedTwo, {morphSVG:"#leg-left-2", ease: Power0.easeNone}, "two")
.to(legRight, speedTwo, {morphSVG:"#leg-right-2", ease: Power0.easeNone}, "two")
.to(patty, speedTwo, {scaleX:1.025, scaleY:0.95, transformOrigin:'50% 0'}, "two")
.to(burgerTop, speedTwo, {y:10}, "two")
.to(arms, speedTwo, {y:10},"two")
.to(salad, speedTwo, {y:10},"two");
return tl;
}
function three() {
var tl = new TimelineMax();
tl.to(mouth, 0.1, {autoAlpha:0}, "three")
.to(mouth2, 0.1, {autoAlpha:1}, "three")
.to(legLeft, 0.1, {morphSVG:legLeft, ease: Power0.easeNone}, "three")
.to(legRight, 0.1, {morphSVG:legRight, ease: Power0.easeNone}, "three")
.to(burgerTop, 0.3, {y:-10}, "three")
.to(salad, 0.3, {y:-10},"three")
.to(arms, 0.3, {y:-10},"three")
.to(patty,1, {scaleX:0.9, scaleY:1.2, transformOrigin:'50%'},"three")
.to(mouth2, 1, {y:3, scaleX:1.6, scaleY:1.4, transformOrigin:'50%'},"three")
.to(face, 1, {y:-2},"three")
.to(pattyGroup, 1, {y:-13},"three")
.to(bunTop, 1, {y:-13},"three");
return tl;
}
function four() {
var tl = new TimelineMax();
tl.to(legLeft, speedFour, {morphSVG:"#leg-left-2", ease: Power0.easeNone}, "four")
.to(legRight, speedFour, {morphSVG:"#leg-right-2", ease: Power0.easeNone}, "four")
.to(patty, speedFour, {scaleX:1.025, scaleY:0.95, transformOrigin:'50% 0'},"four")
.to(pattyGroup, speedFour, {y:0},"four")
.to(bunTop, speedFour, {y:0},"four")
.to(burgerTop, speedFour, {y:15}, "four")
.to(arms, speedFour, {y:15},"four")
.to(salad, speedFour, {y:15},"four")
.to(face, speedFour, {y:0},"four")
.set(mouth, {autoAlpha:1},"four+=0.1")
.set(mouth2, {autoAlpha:0},"four+=0.1")
.set(eyeLeft, {autoAlpha:0}, "four+=0.1")
.set(eyeRight, {autoAlpha:0}, "four+=0.1")
.set(eyes2, {autoAlpha:1}, "four+=0.1")
.to(armLeft, speedFour, {morphSVG:"#arm-left-2", scaleY:0.8, ease: Power0.easeNone}, "four")
.to(armRight, speedFour, {morphSVG:"#arm-right-2", scaleY:0.8, ease: Power0.easeNone}, "four");
return tl;
}
function five() {
var tl = new TimelineMax();
tl.to(burgerTop, speedFive, {y:8}, "six")
.to(salad, speedFive, {y:8},"six")
.to(patty, speedFive, {scale:1, transformOrigin:'50% 0',ease: Bounce.easeOut},"six")
.to(pattyGroup, speedFive, {y:-3, ease: Bounce.easeOut},"six")
.to(bunTop, speedFive, {y:-3,ease: Bounce.easeOut},"six");
return tl;
}
function six() {
var tl = new TimelineMax();
tl.to(burgerTop, speedSix, {y:15}, "six")
.to(salad, speedSix, {y:15},"six")
.to(patty, speedSix, {scaleX:1.05, scaleY:0.95, transformOrigin:'50% 0'},"six")
return tl;
}
function seven() {
var tl = new TimelineMax();
tl.set(eyes2, {autoAlpha:0})
.set(eyeLeft, {autoAlpha:1})
.set(eyeRight, {autoAlpha:1})
.to(bunBottom, speedSeven, {y:0}, "seven")
.to(burgerTop, speedSeven, {y:0}, "seven")
.to(pattyGroup, speedSeven, {y:0},"seven")
.to(bunTop, speedSeven, {y:0},"seven")
.to(salad, speedSeven, {y:0},"seven")
.to(patty, speedSeven, {scale:1, transformOrigin:'50% 0'},"seven")
.to(arms, speedSeven, {y:0},"seven")
.to(armLeft, speedSeven, {morphSVG:"#arm-left-3", scaleY:1, ease: Power0.easeNone}, "seven")
.to(armRight, speedSeven, {morphSVG:"#arm-right-3", scaleY:1, ease: Power0.easeNone}, "seven")
tl.to(legLeft, speedSeven, {morphSVG:legLeft, ease: Power0.easeNone}, "seven")
.to(legRight, speedSeven, {morphSVG:legRight, ease: Power0.easeNone}, "seven");
return tl;
}
function eight() {
var tl = new TimelineMax({delay:0.5});
tl.to(armLeft, speedEight, {morphSVG:armLeft, ease: Power0.easeNone}, "seven")
.to(armRight, speedEight, {morphSVG:armRight, ease: Power0.easeNone}, "seven");
return tl;
}
masterTl.timeScale(2);