HTML5拟人化的埃及英镑PK美元

也可用于表示人民币一直在贬值（缩水）...

html5, 电子钞票

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var timing = 1,
    dollarEyes = [document.querySelector('.dollar .eye-inner-right'), document.querySelector('.dollar .eye-inner-left')],
    dollarSmallEyes = [document.querySelector('.dollar .eye-inner-right path'), document.querySelector('.dollar .eye-inner-left path')],
    egpWhiteEyes = [document.querySelector('.egp .state-start .eye-circle-right'), document.querySelector('.egp .state-start .eye-circle-left')],
    egpEyes = [document.querySelector('.egp .state-start .eye-inner-right'), document.querySelector('.egp .state-start .eye-inner-left')],
    egpSmallEyes = [document.querySelector('.egp .state-start .eye-inner-right .egp-inner'), document.querySelector('.egp .state-start .eye-inner-left .egp-inner')],
    egpArms = [document.querySelector('.egp .state-start-arm-right'), document.querySelector('.egp .state-start-arm-left')],
    egpEyebrows = [document.querySelector('.egp .state-start .eyebrow-right'), document.querySelector('.egp .state-start .eyebrow-left')],
    tlMain = new TimelineMax({
        paused: true,
        delay: 1,
        repeat: -1
    }),
    tlDollar = new TimelineMax({
        paused: true
    }),
    tlDollarHappy = new TimelineMax({
        paused: true
    }),
    tlEgp = new TimelineMax({
        paused: true
    }),
    tlCloud = new TimelineMax({
        paused: true
    }),
    tlArms = new TimelineMax({
        paused: true,
        repeat: 4
    }),
    tlEgpAfraid = new TimelineMax({
        paused: true
    }),
    tlEgpSad = new TimelineMax({
        paused: true
    }),
    timingObj = {
        currency: timing / 2,
        rain: timing,
        arms: timing / 6,
        egpAfraid: timing / 3
    },
    armsStart = TweenMax.staggerTo(egpArms, timing / 3, {
        y: '25px',
        ease: Linear.easeNone,
        cycle: {
            x: ['-25px', '25px'],
            rotation: ['-80px', '80px'],
            transformOrigin: ['left top', 'right top']
        }
    }, 0),
    armsEnd = TweenMax.staggerTo(egpArms, timing / 4, {
        y: '0px',
        ease: Linear.easeNone,
        cycle: {
            x: ['0px', '0px'],
            rotation: ['0px', '0px'],
            transformOrigin: ['left top', 'right top']
        }
    }, 0);;

tlDollar.fromTo(dollarEyes, timingObj.currency, {
    x: '25%'
}, {
    x: '0%'
}).fromTo(dollarSmallEyes, timingObj.currency, {
    x: '50%',
    y: '-25%'
}, {
    x: '0%',
    y: '0%'
}, '-=' + timingObj.currency).to(dollarEyes, timingObj.currency, {
    x: '25%'
}, '+=' + timingObj.currency * 2).to(dollarSmallEyes, timingObj.currency, {
    x: '50%',
    y: '-25%'
}, '-=' + timingObj.currency);
tlDollarHappy.fromTo(dollarEyes, timingObj.currency, {
    x: '25%'
}, {
    x: '0%'
}).fromTo(dollarSmallEyes, timingObj.currency, {
    x: '50%',
    y: '-25%'
}, {
    x: '0%',
    y: '0%'
}, '-=' + timingObj.currency).to('.dollar .state-normal .mouth', timingObj.currency, {
    morphSVG: ".dollar .state-happy .mouth-happy path",
    ease: Power1.easeInOut
}).to('.dollar .state-happy .mouth-happy-', timingObj.currency, {
    autoAlpha: 1,
    ease: Power1.easeInOut
}, '-=' + timingObj.currency / 2);
tlEgp.fromTo(egpEyes, timingObj.currency, {
    x: '-25%',
    y: '20%'
}, {
    x: '0%',
    y: '0%'
}).fromTo(egpSmallEyes, timingObj.currency, {
    x: '-25%',
    y: '20%'
}, {
    x: '0%',
    y: '0%'
}, '-=' + timingObj.currency).to(egpEyes, timingObj.currency, {
    x: '-25%',
    y: '20%'
}, '+=' + timingObj.currency).to(egpSmallEyes, timingObj.currency, {
    x: '-25%',
    y: '20%'
}, '-=' + timingObj.currency);
tlArms.staggerTo(egpArms, timingObj.arms, {
    cycle: {
        rotation: ['-70px', '70px']
    },
    ease: Linear.easeNone
}, 0).staggerTo(egpArms, timingObj.arms, {
    cycle: {
        rotation: ['-80px', '80px']
    },
    ease: Linear.easeNone
}, 0);

tlCloud.fromTo('.cloud', timingObj.rain / 2, {
    y: '-100%',
    autoAlpha: 0
}, {
    y: '0%',
    autoAlpha: 1,
    ease: Power1.easeOut
}).fromTo('.line', timingObj.rain, {
    y: '-105%'
}, {
    y: '105%',
    ease: Linear.easeNone
}).fromTo('.line-extend', timingObj.rain, {
    y: '-105%'
}, {
    y: '105%',
    ease: Linear.easeNone
}, '-= ' + timingObj.rain / 2).fromTo('.line', timingObj.rain, {
    y: '-105%'
}, {
    y: '105%',
    ease: Linear.easeNone
}, '-= ' + timingObj.rain / 2).fromTo('.line-extend', timingObj.rain, {
    y: '-105%'
}, {
    y: '105%',
    ease: Linear.easeNone
}, '-= ' + timingObj.rain / 2).to(['.line', '.line-extend'], 0, {
    autoAlpha: 0
}).to('.cloud', timingObj.rain / 2, {
    y: '-100%',
    autoAlpha: 0,
    ease: Power1.easeOut
});

tlEgpAfraid.to(egpEyes, timingObj.egpAfraid, {
    y: '-10%'
}).to(egpSmallEyes, timingObj.egpAfraid, {
    y: '-10%'
}, '-=' + timingObj.currency).to(egpEyes, timingObj.egpAfraid, {
    y: '20%'
}, '+=' + timingObj.currency).to(egpSmallEyes, timingObj.egpAfraid, {
    y: '20%'
}, '-=' + timingObj.currency).staggerTo(egpEyebrows, timingObj.egpAfraid, {
    y: '-30%',
    cycle: {
        x: ['15%', '-15%']
    }
}, 0, '-=' + timingObj.egpAfraid / 3).to('.egp .state-start .mouth', timingObj.egpAfraid, {
    morphSVG: '.egp .state-middle .mouth'
}).to(['.egp .state-middle .teeth-top', '.egp .state-middle .teeth-bottom'], timingObj.egpAfraid, {
    autoAlpha: 1
}, '-=' + timingObj.egpAfraid).staggerTo(egpWhiteEyes, timingObj.egpAfraid, {
    transformOrigin: 'center',
    cycle: {
        scale: ['.9', '1.1']
    }
}, 0, '-=' + timingObj.egpAfraid).to(egpEyes[0], timingObj.egpAfraid, {
    scale: '.8',
    x: '+=10%',
    y: '+=10%'
}, '-=' + timingObj.egpAfraid).to('.egp', timingObj.egpAfraid * 6, {
    transformOrigin: 'bottom',
    scale: '.65'
}, '-=' + timingObj.egpAfraid).staggerTo(egpEyebrows, timingObj.egpAfraid, {
    y: '0%',
    x: '0%'
}, 0).staggerTo(egpWhiteEyes, timingObj.egpAfraid, {
    scale: '1'
}, 0, '-=' + timingObj.egpAfraid).to('.egp .state-start .mouth', timingObj.egpAfraid, {
    morphSVG: '.egp .state-end .mouth'
}).to(['.egp .state-middle .teeth-top', '.egp .state-middle .teeth-bottom'], timingObj.egpAfraid / 2, {
    autoAlpha: 0
}, '-=' + timingObj.egpAfraid / 2).to(egpEyes[0], timingObj.egpAfraid, {
    scale: '1',
    x: '-=10%',
    y: '-=10%'
}, '-=' + timingObj.egpAfraid);
tlEgpSad.to(egpEyes, timingObj.currency / 2, {
    x: '0%',
    y: '0%'
}).to(egpSmallEyes, timingObj.currency / 2, {
    x: '-10%',
    y: '-10%'
}, '-=' + timingObj.currency).to(['.egp .state-end .left-cry', '.egp .state-end .right-cry'], timingObj.egpAfraid, {
    autoAlpha: 1
}).to('.egp .state-start .mouth', timingObj.egpAfraid / 2, {
    y: '-=3px'
}).to('.egp .state-start .mouth', timingObj.egpAfraid / 2, {
    y: '+=3px'
}).to('.egp .state-start .mouth', timingObj.egpAfraid / 2, {
    y: '-=3px'
}).to('.egp .state-start .mouth', timingObj.egpAfraid / 2, {
    y: '+=3px'
}).to('.egp .state-start .mouth', timingObj.egpAfraid / 2, {
    y: '-=3px'
}).to(['.egp .state-end .left-cry', '.egp .state-end .right-cry'], timingObj.egpAfraid, {
    delay: 2
});

tlMain.add(tlDollar.play());
tlMain.add(tlEgp.play(), .1);
tlMain.add(tlCloud.play(), '+=' + timingObj.currency);
tlMain.add(tlEgpAfraid.play(), '-=' + timingObj.currency * 8.2);
tlMain.add(armsStart, '-=' + timingObj.currency * 5);
tlMain.add(tlArms.play(), '-=' + timingObj.currency * 4.3);
tlMain.add(armsEnd, '-=' + timingObj.currency);
tlMain.add(tlDollarHappy.play());
tlMain.add(tlEgpSad.play());

tlMain.play();

编译

CSS

HTML

</g>
                <path class="mouth-happy-" style="fill:#242624;" d="M499.3,398.5c0.4,0.4,1.8,2.4,2.3,2c0.2-1,0.3-3-1.2-4.4
			c-2.2-1.9-8.5-2.3-12.1-0.9c-0.5,0.2-1.5,0.5-0.8,0.7C490.7,395,497.2,396.3,499.3,398.5z" />
            </g>
            <g class="state-normal">

也可用于表示人民币一直在贬值（缩水）...

html5, 电子钞票

编辑器支持Emmet

快捷键

也可用于表示人民币一直在贬值（缩水）...

html5, 电子钞票

使用HTML5和SVG实现的字母拟人化劈叉动画

HTML5 P5.js 自动行走的蜘蛛AI机器人

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：