示例

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()
};

放屁的犀牛（farting rhino）相关推荐

do vis是什么意思_已知fart是“放屁”,那fart around什么意思？
之前有人问我,老外怎么这么粗鲁,同事竟然和我说:Don't fart around我又没到处放屁,干嘛这么说我~哈哈,其实人家是说....... NO.1 fart around什么意思?fart a ...
董小姐的空调不一定能当发电站，但牛放屁确实可以发电
梦晨萧箫发自凹非寺量子位报道 | 公众号 QbitAI "我们现在让空调成为一个发电站,晚上照明不花一分钱!" 说这话的不是别人,正是格力董事长董明珠. 她声称,要是这项 ...
穿皮裤放屁，裤子会鼓吗？真相看这里！
1 拉莫斯:没事儿,打今儿起我管你叫哥,你管我叫爸,咱俩各论各的. ▼ 2 妈妈都是为了你好 ▼ 3 秃头女孩最后的倔强 ▼ 4 新浪OS:呼~太紧张了,放松下 ▼ 5 这什么鬼玩意儿? ▼ 6 这到 ...
脱裤子放屁,多此一举
脱裤子放屁,多此一举. 转载于:https://www.cnblogs.com/zhangzujin/p/3892468.html
终于可以自定义喇叭声音：你的特斯拉可以“放屁”吓唬人了
你的特斯拉终于可以"放屁"了!这可是一条"有味道"的消息,这位硅谷钢铁侠马克斯也是脑洞大开呀... 近日,据外媒 The Verge 报道称,特斯拉的最新圣诞节 ...
4个空格和一个tab有什么区别_为什么有时候会放屁连连？这4个原因，一个都别放过...
肠胃是人体非常重要的一个部位,肠胃每天都需要工作,如果一个人的肠胃不好了,整个人都会非常不舒服.有些人经常会放屁,可能很多人都没有注意这个现象,但其实放屁也是肠胃有一些问题. 什么原因会导致放屁多? ...
为什么吃红薯容易放屁
原因红薯的淀粉含量比较高,也含有大量的拥有纤维素以及果胶的黏液物质, 这种物质可以促进肠胃蠕动, 因此放屁是吃了红薯之后肠胃蠕动活跃的表现之一, 高淀粉的食物消化过程中更容易产生大量的气体,因此吃了 ...
车站椅子上密密麻麻的孔，是为了方便放屁吗？
车站椅子上密密麻麻的孔,是为了方便放屁吗? 不知道你们有没有好奇过为什么车站的椅子上总有许多小孔难道是为了方便放屁? 这个有味道的问题本来我是不想回答的不过为了避免你们出去乱说被别人笑话 ...
一个“脱裤子放屁“的功能!
一个"脱裤子放屁"的功能! 哩语 "脱了裤子放屁",此话通常用来讥讽别人说话做事画蛇添足.多此一举. 1.背景故事是这样的.公司的其他部门经常会要求我们部门以 ...

放屁的犀牛（farting rhino）

犀牛

示例

HTML

CSS

JS

放屁的犀牛（farting rhino）相关推荐

最新文章

热门文章