手拿筷子吃面条的熊猫宝宝

Panda using chopstick eating noodle

h5, svg, animal

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2520
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function panda() {
    var tl = new TimelineMax()
    tl.add('s')
    tl.to('#right-foot', 0.7, {
            transformOrigin: 'center center',
            rotation: 20,
            yoyo: true,
            repeat: -1,
            ease: Power0.easeNone
        }, 's')
        .to('#head', 0.7, {
            transformOrigin: 'center center',
            transform: "rotateZ(1deg) rotateY(0deg) rotateX(1deg)",
            force3D: true,
            yoyo: true,
            repeat: -1,
            ease: Power0.easeNone
        }, 's')
        .to('.noodle', 0.7, {
            transformOrigin: 'center center',
            y: 10,
            x: -4,
            yoyo: true,
            repeat: -1,
            ease: Power0.easeNone
        }, 's')
        .to('#noodle1', 0.5, {
            transformOrigin: 'center center',
            y: 2,
            yoyo: true,
            repeat: -1,
            ease: Power0.easeNone
        }, 's')
        .to('#noodle2', 0.6, {
            transformOrigin: 'center center',
            y: 3,
            yoyo: true,
            repeat: -1,
            ease: Power0.easeNone
        }, 's')
        .to('#noodle3', 0.8, {
            transformOrigin: 'center center',
            y: 3,
            yoyo: true,
            repeat: -1,
            ease: Power0.easeNone
        }, 's')
        .to('#munch', 0.5, {
            transformOrigin: 'center center',
            y: 2,
            x: 1,
            rotation: 20,
            yoyo: true,
            repeat: -1,
            ease: Power0.easeNone
        }, 's')
        .to('#chopstick-1', 0.8, {
            transformOrigin: 'right bottom',
            y: 2,
            x: 3,
            rotation: 40,
            yoyo: true,
            repeat: -1,
            ease: Power0.easeNone
        }, 's')
        .to('#chopstick-2', 0.8, {
            transformOrigin: 'right bottom',
            y: 2,
            x: 7,
            rotation: 50,
            yoyo: true,
            repeat: -1,
            ease: Power0.easeNone
        }, 's')
        .to('#left-hand', 0.8, {
            transformOrigin: 'right bottom',
            y: -2,
            x: 1,
            rotation: 5,
            yoyo: true,
            repeat: -1,
            ease: Power0.easeNone
        }, 's')
        .to('#right-arm', 0.7, {
            transformOrigin: 'right bottom',
            y: 2,
            x: 1,
            rotation: -1,
            yoyo: true,
            repeat: -1,
            ease: Power0.easeNone
        }, 's')
        .to('.move', 0.7, {
            transformOrigin: 'center center',
            y: 2,
            x: 1,
            yoyo: true,
            repeat: -1,
            ease: Power0.easeNone
        }, 's')

return tl
}

var master = new TimelineMax()
master.timeScale(1.8).add(panda())

编译

CSS

HTML

<div class="dribble">
  <p>Based on original dribble shot <a href="https://dribbble.com/shots/3889141-Panda">
  here
</a></p>

</div>

Panda using chopstick eating noodle

h5, svg, animal

编辑器支持Emmet

快捷键

Panda using chopstick eating noodle

h5, svg, animal

CSS3可爱的熊猫和竹子

纯CSS3构建的竹林和国宝熊猫图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：