示例

在这里插入图片描述

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566.93 567.32"><ellipse id="shadow" cx="271.09" cy="401.98" rx="124.49" ry="15" opacity=".07" fill="#231f20"/><g id="eye-r"><path class="cls-4" d="M402.64,227.49a18.24,18.24,0,0,1,20.59,15.56h0a18.28,18.28,0,0,1-15.52,20.61h0a18.25,18.25,0,0,1-20.59-15.55h0a18.26,18.26,0,0,1,15.52-20.62Z" transform="translate(0 .39)"/><g id="pupil-r"><path class="cls-5" d="M403.68,226.82a10.67,10.67,0,1,1-9.1,12.07A10.57,10.57,0,0,1,403.68,226.82Z" transform="translate(0 .39)"/><path class="cls-4" d="M398.61 238a4 4 0 111.09 7.85 4 4 0 01-4.49-3.33A4.06 4.06 0 01398.61 238zM411.46 231.58a3.24 3.24 0 013.59 2.71 3.18 3.18 0 01-2.73 3.56 3.12 3.12 0 01-3.54-2.68A3.18 3.18 0 01411.46 231.58z" transform="translate(0 .39)"/></g></g><path id="foot-front-dk" d="M349,353.75s10.13,24.9,6.23,40.48c0,0-10.9,9.34-21-1.55S349,353.75,349,353.75Z" transform="translate(0 .39)" fill="#7e8e99"/><path class="cls-7" d="M415.17,254.1s6.22-4.67,11.67-21,7-26.47,14-21,9.34,34.25,3.11,45.15S415.17,254.1,415.17,254.1Z" transform="translate(0 .39)"/><path id="foot-back-dk" d="M213.49,363.7s3.2,23.67,0,31.3c0,0-16.78.78-25.57-7.63s4.8-32.06,4.8-32.06Z" transform="translate(0 .39)" fill="#7e8e98"/><path id="foot-front-lt" class="cls-9" d="M306.4,400.17s2.82-2-3-20.5,0-20,0-20,15.71-11.34,28.73-5.3c0,0,10.21,10.33,11.42,20.28s.79,8,1,23.26C344.6,397.94,320.73,408.82,306.4,400.17Z" transform="translate(0 .39)"/><path class="cls-9" d="M487.57,201.93s-6.23-1.55-10.9,15.58-3.11,38.14-29.58,36.59-33.48-1.56-46.72-24.91-35-24.14-63.05-20.25-59.17,7.79-79.41-2.33-71.62-14-105.1,11.68-43.59,68.5-34.25,94.2a143.29,143.29,0,0,0,10.11,21.42h0a22.3,22.3,0,0,0,1.22,2.12c4.49,7,22.48,29.49,72.59,35.88a1.55,1.55,0,0,1,.39.06A44.11,44.11,0,0,1,208,374.5c5.82,2.93,16.49,7.47,35.11,8.83,31.92,2.34,61.5-3.89,61.5-3.89l43.13-13.5c3.7-1.37,8.12-3.44,9.81-6,0,0,14.08,27.61,67,24.92,45.92-2.34,72.76-23.29,83.29-84.86C517.93,240.86,496.91,200.38,487.57,201.93Z" transform="translate(0 .39)"/><path id="foot-back-lt" class="cls-9" d="M202.47,350.49l-.72,45.07S187.1,409.1,160.59,402c0,0-1.54-25.25-19.68-48.55,0,0-16-20.8-7.95-25.54s34.19-18.42,50.09-9.91S201.37,326.91,202.47,350.49Z" transform="translate(0 .39)"/><path class="cls-7" d="M510.36,275.59c1.71-45.56-14.8-75-22.79-73.66,0,0-6.23-1.55-10.9,15.58-4.1,15-3.41,33-21,36.18C462.75,265.2,480,285.13,510.36,275.59Z" transform="translate(0 .39)"/><path d="M488.15,205.7a1.7,1.7,0,0,0-.55,0c5.54,2.18,12.82,21.61,9.74,49.49-.23,2.12,4.6,5.74,7.6,4.8C506.2,226.4,494,204.72,488.15,205.7Z" transform="translate(0 .39)" fill="#dde6ed"/><path id="tail" class="cls-9" d="M125.92,251.42S102.33,278.65,99.38,318c0,0,16.21-48.41,42.75-60.51S125.92,251.42,125.92,251.42Z" transform="translate(0 .39)"/><g id="ear-r"><path class="cls-9" d="M370,212.84s5.45-35.82,17.13-38.93,18.68,23.36-7,40.48Z" transform="translate(0 .39)"/><path class="cls-11" d="M376.24,212.84s4.67-14.8,6.23-21.8,7.79-7.78,8.56-3.11S382.47,210.5,376.24,212.84Z" transform="translate(0 .39)"/></g><g id="eye-l"><path class="cls-4" d="M360.18,237.17a18.23,18.23,0,0,1,20.58,15.55h0a18.26,18.26,0,0,1-15.51,20.62h0a18.26,18.26,0,0,1-20.59-15.55h0a18.24,18.24,0,0,1,15.52-20.62Z" transform="translate(0 .39)"/><g id="pupil-l"><path class="cls-5" d="M357,240.83a10.68,10.68,0,1,1-9.1,12.08A10.57,10.57,0,0,1,357,240.83Z" transform="translate(0 .39)"/><path class="cls-4" d="M351.89 252a4 4 0 014.48 3.4 4 4 0 01-7.87 1.12A4.05 4.05 0 01351.89 252zM364.75 245.6a3.23 3.23 0 013.59 2.71 3.17 3.17 0 01-2.73 3.55 3.12 3.12 0 01-3.55-2.67A3.17 3.17 0 01364.75 245.6z" transform="translate(0 .39)"/></g></g><path class="cls-7" d="M159.6,213.63a77.05,77.05,0,0,0-6.79,4.66,96.54,96.54,0,0,0-23,25.26A10.81,10.81,0,0,0,131,244s10.89,3.9,18.67,3.9,6.24-2.34,8.57-3.9,7-10.11,7-20.23C165.27,219.17,162.56,215.88,159.6,213.63Zm10.34,27.23s-7.79,3.11-3.9,8.57,7.79,9.35,10.91,3.11S173.05,238.53,169.94,240.86ZM145.8,255.65s-8.56,3.9-3.11,9.35,13.24,4.67,14,.78S148.92,254.1,145.8,255.65Zm52.94-33.47s-11.68,1.56-12.45,8.57,7.78,14.78,13.24,8.55S205.75,222.18,198.74,222.18Zm116,3.89s-10.12,3.12-10.9,6.23-3.89,6.23-.77,8.56,17.12.78,17.12.78S321.75,224.52,314.74,226.07Zm-27.25,14s-9.34.78-9.34,6.23,1.56,7.79,5.45,8.57,8.56,0,9.34-3.12S292.94,238.53,287.49,240.08ZM270,210.82a23,23,0,0,0-.4,4.35c0,5.46.79,5.46,2.34,8.57a41.83,41.83,0,0,0,7,9.34c2.34,2.34,10.12.78,17.13-3.12,4.68-2.59,3.45-11.44,2.13-17C288.14,213.27,278.52,212.79,270,210.82Zm-24.76-8.69a8.51,8.51,0,0,0-2.1,7.59c1.55,7,3.11,10.12,6.22,10.12a12.49,12.49,0,0,0,8.57-3.89c1.61-1.61,2.84-5,3.46-7.81-1.18-.47-2.35-1-3.46-1.53A63.23,63.23,0,0,0,245.22,202.13Zm-17.87-2.85a128.64,128.64,0,0,0-36.94,2.33c-.21,5.65.91,14.09,9.12,15.12,12.44,1.56,17.9,1.56,21.79-.78C224.54,214,226.7,203,227.35,199.28Zm-2.91,25.24c-2.18.86-10.91,3.89-10.91,11.67s-3.11,10.9,3.12,14.79,13.23,7,17.9,3.12,10.9-9.34,10.9-14.8-3.11-13.23-3.11-13.23S228.33,223,224.44,224.52Z" transform="translate(0 .39)"/><path class="cheek cls-11" d="M371.57,292.25a14,14,0,1,1-14-14A14,14,0,0,1,371.57,292.25Z" transform="translate(0 .39)"/><g id="ear-l"><path class="cls-9" d="M359.89,211.28s7.79-14.8,3.9-27.25-10.12-20.24-17.91-12.46,2.34,37.37,7,42S359.89,211.28,359.89,211.28Z" transform="translate(0 .39)"/><path class="cls-11" d="M356,210.5s5.45-24.13-1.56-28.8-3.89,6.23-3.11,10.89S352.11,210.5,356,210.5Z" transform="translate(0 .39)"/></g><path id="mouth" d="M380.94,340.17s.72,16,18.21,13.58" transform="translate(0 .39)" fill="none" stroke="#000" stroke-miterlimit="10"/><g id="fart"><path class="cls-4" d="M68.91,242.15l28.47,13.76-28.47,17.6S31.24,258.83,68.91,242.15Z" transform="translate(0 .39)"/><circle class="cls-4" cx="64.69" cy="241.74" r="8.06"/><circle class="cls-4" cx="54.02" cy="245.57" r="6.87"/><circle class="cls-4" cx="61.59" cy="277.72" r="8.44"/><circle class="cls-4" cx="54.51" cy="270.2" r="6.38"/><circle class="cls-4" cx="52.17" cy="257.54" r="10.95"/><circle class="cls-4" cx="39.58" cy="243.55" r="3.45"/><circle class="cls-4" cx="45.04" cy="267.51" r="5.46"/></g><g id="front-eye-blink"><path class="top cls-9" d="M349.7,265.74,377.54,244c-15-20-45.21,3.67-30,23.39Z" transform="translate(0 .39)"/><path class="bottom cls-9" d="M377.54,244l-30,23.39C362.6,286.91,392.22,263.69,377.54,244Z" transform="translate(0 .39)"/></g><g id="back-eye-blink"><path class="top cls-9" d="M388.61,242.11,423.24,249c5.37-24.43-32.35-31.8-37.31-7.38Z" transform="translate(0 .39)"/><path class="bottom cls-9" d="M423.24,249l-37.31-7.38C381,265.71,418,272.92,423.24,249Z" transform="translate(0 .39)"/></g>
</svg><a href="https://greensock.com"><img class="gsap-3-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-3-logo.svg" width="150" /></a>

CSS

body {
background: rgb(47,163,127); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(47,163,127,1) 0%, rgba(47,163,127,1) 58%, rgba(31,137,102,1) 58%, rgba(31,137,102,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(47,163,127,1) 0%,rgba(47,163,127,1) 58%,rgba(31,137,102,1) 58%,rgba(31,137,102,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(47,163,127,1) 0%,rgba(47,163,127,1) 58%,rgba(31,137,102,1) 58%,rgba(31,137,102,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2fa37f', endColorstr='#1f8966',GradientType=0 ); /* IE6-9 */
}svg {width: 100vw;height: 100vh;
}.cls-5 {fill: #231f20;
}
.cls-4 {fill: #fff;
}
.cls-7 {fill: #b6c4cf;
}
.cls-9 {fill: #9eb1bf;
}
.cls-11 {fill: #ffc1c0;
}.gsap-3-logo {width: 20vw;max-width: 150px;position: fixed;bottom: 15px;right: 15px;
}

JS

const stepDuration = 0.5,bklegs = '#foot-front-dk, #foot-back-dk',frlegs = '#foot-front-lt, #foot-back-lt'// walking cycle
gsap.set(bklegs, {transformOrigin: "50% 0%",rotation: 10
})gsap.set(frlegs, {transformOrigin: "50% 0%",rotation: 0
})const walk = () => {gsap.timeline({repeat: -1,defaults: { ease: "power2.inOut", duration: stepDuration }}).add('start').to(bklegs, { rotation: -10 }).to(bklegs, { rotation: 10 }).to(frlegs, { rotation: 10 }, 'start').to(frlegs, { rotation: 0 }, `start+=${stepDuration}`)
}// bouncing cycle
gsap.set('svg', {y: -2
})const bounce = () => {gsap.timeline({repeat: -1,defaults: { duration: 0.25 }}).add('bouncest').to('svg', { y: 2, ease: "elastic.config(1.75, 0.3)" }).to('svg', { y: -2, ease: "elastic.in.config(1.75, 0.3)" }, 'bouncest+=0.25' ).to('#shadow', { y: 0, ease: "sine.in"  }, 'bouncest').to('#shadow', { y: 3, opacity: 0.025, ease: "sine" }, 'bouncest+=0.25' )
}// ears and tail
const eartail = '#ear-r, #tail',earl = '#ear-l'gsap.set('#ear-r', {transformOrigin: "50% 100%",rotation: 10
})gsap.set(earl, {transformOrigin: "50% 100%",rotation: -5
})gsap.set('#tail', {transformOrigin: "100% 0%",rotation: 5
})const earstail = () => {gsap.timeline({repeat: -1,defaults: { ease: "circ", duration: 0.5 }}).add('ears').to(eartail, { rotation: -5 }).to(earl, { rotation: 5 }, 'ears').to(eartail, { rotation: 5 }, 'ears+=0.5').to(earl, { rotation: -5 }, 'ears+=0.5')
}// blink
gsap.set('#front-eye-blink .top, #back-eye-blink .top', {transformOrigin: "50% 0%",scaleY: 0
})gsap.set('#front-eye-blink .bottom, #back-eye-blink .bottom', {transformOrigin: "50% 100%",scaleY: 0
})const blink = () => {gsap.timeline({repeat: -1,repeatDelay: 1.5,defaults: { ease: "circ", duration: 0.1 }}).add('blink').to('#front-eye-blink .bottom, #front-eye-blink .top, #back-eye-blink .top, #back-eye-blink .bottom', { scaleY: 1 }).to('#front-eye-blink .bottom, #front-eye-blink .top, #back-eye-blink .top, #back-eye-blink .bottom', { scaleY: 0 })
}// fart
gsap.set('#fart circle, #fart path', {scale: 0.4,opacity: 0,transformOrigin: '100% 50%'
})const fartDur = 0.4const fart = () => {gsap.timeline({repeat: -1,repeatDelay: 3,defaults: { ease: "circ", duration: fartDur }}).add('fart').to('#fart', { x: -20 }).to('#fart circle, #fart path', { scale: 1, opacity: 1, stagger: 0.05 }, 'fart').to('.cheek', { fill: '#ed9795' }, 'fart').to('#fart circle, #fart path', { scale: 0.4, opacity: 0, stagger: 0.05 }, `fart+=${fartDur}`).to('.cheek', { fill: '#ffc1c0' }, `fart+=${fartDur}`)
}window.onload = () => {walk()bounce()earstail()blink()fart()
};