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

Fontness Exercise E, 有趣的体育体操类动画。

html5, sports

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var xmlns = "http://www.w3.org/2000/svg",
    xlinkns = "http://www.w3.org/1999/xlink",
    select = function(s) {
        return document.querySelector(s);
    },
    selectAll = function(s) {
        return document.querySelectorAll(s);
    },
    bigE = select('.bigE'),
    ELegLUp = select('.ELegLUp'),
    ELegRUp = select('.ELegRUp'),
    ELegLUpArr = ELegLUp.getAttribute('points').split(' ').map(Number),
    ELegRUpArr = ELegRUp.getAttribute('points').split(' ').map(Number),
    ELegLDownArr = "392.5 397.5 354.5 406.5 324.5 418.5 320.5 405.5".split(' ').map(Number),
    ELegRDownArr = "411.5 397.5 445.5 405.5 475.84 416.15 479.5 403.5".split(' ').map(Number),
    ELegLTemp = ELegLUpArr.slice(0),
    ELegRTemp = ELegRUpArr.slice(0),
    ouchLines = selectAll('.ouchGroup line')

TweenMax.set('svg', {
    visibility: 'visible'
})

TweenMax.set(ouchLines, {
    drawSVG: '0% 0%'
})
var mainTl = new TimelineMax({
    repeat: -1
});

var tl = new TimelineMax({
    repeat: 0,
    yoyo: false,
    repeatDelay: 4,
    onUpdate: onUpdate
}).timeScale(3);
tl.to(ELegLUpArr, 2, {
        endArray: ELegLDownArr,
        ease: Elastic.easeInOut.config(1.6, 0.85),
        onStart: function() {
            TweenMax.delayedCall(0.34, function() {
                ouchTl.play(0)
            })
        }
    })
    .to(ELegRUpArr, 2, {
        endArray: ELegRDownArr,
        ease: Elastic.easeInOut.config(1.6, 0.85)
    }, '-=2')
    .to(bigE, 2, {
        y: 56,
        rotation: -4,
        transformOrigin: '50% 100%',
        ease: Elastic.easeInOut.config(1.6, 0.85)
    }, '-=2')
    .to('#eBg', 2, {
        attr: {
            x: 13,
            y: -56
        },
        ease: Elastic.easeInOut.config(1, 1.5)
    }, '-=2')

.to(ELegLUpArr, 8, {
        endArray: ELegLTemp,
        ease: Elastic.easeInOut.config(0.6, 0.85)
    })
    .to(ELegRUpArr, 8, {
        endArray: ELegRTemp,
        ease: Elastic.easeInOut.config(0.6, 0.85)
    }, '-=8')
    .to(bigE, 4, {
        rotation: 9,

ease: Expo.easeIn
    }, '-=8')
    .to(bigE, 8, {
        y: 0,
        ease: Elastic.easeInOut.config(0.6, 0.85)
    }, '-=8')
    .to(bigE, 2, {
        rotation: 0,

ease: Sine.easeInOut
    }, '-=4')
    .to('#eBg', 8, {
        attr: {
            x: 0,
            y: 0
        },
        ease: Elastic.easeInOut.config(1, 1.5)
    }, '-=8')

function onUpdate() {
    ELegLUp.setAttribute('points', ELegLUpArr);
    ELegRUp.setAttribute('points', ELegRUpArr);

}

var patternTl = new TimelineMax();
patternTl.staggerTo('#eBg *', 0.3, {
    cycle: {
        fillOpacity: [1, 0]
    },
    repeat: 11,
    yoyo: true,
    ease: Linear.easeNone
}, 0)

var ouchTl = new TimelineMax({
    paused: true,
    repeat: 0
}).timeScale(4);
ouchTl.staggerTo(ouchLines, 0.5, {
        drawSVG: '0% 50%',
        ease: Linear.easeNone
    }, 0.1)
    .staggerTo(ouchLines, 0.4, {
        drawSVG: '50% 90%',
        ease: Linear.easeNone
    }, 0.1, '-=0.2')
    .staggerTo(ouchLines, 0.5, {
        drawSVG: '100% 100%',
        ease: Linear.easeNone
    }, 0.1, '-=0.2')

mainTl.add([tl, patternTl], 0);

//ScrubGSAPTimeline(tl)

编译

CSS

HTML

Fontness Exercise E, 有趣的体育体操类动画。

html5, sports

编辑器支持Emmet

快捷键

Fontness Exercise E, 有趣的体育体操类动画。

html5, sports

HTML5/CSS3/SVG实现的液体掉落（滑落）动画

使用HTML5和ES6（JS）实现的在线数独游戏生成器和解答

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：