SVG 万圣节变脸南瓜

SVG Morphing Halloween Pumpkin

svg, plant

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var origin = document.getElementsByClassName('face-1')[0],
    originTopLayer = origin.getElementsByClassName('topLayer')[0].attributes.d.value,
    originBottomLayer = origin.getElementsByClassName('bottomLayer')[0].attributes.d.value,
    timelineIntro = new TimelineLite({
        onComplete: morphSVG
    }),
    timelineTopLayer = new TimelineMax({
        repeat: -1,
        delay: 1
    }),
    timelineBottomLayer = new TimelineMax({
        repeat: -1,
        delay: 1
    }),
    easing = Elastic.easeIn.config(0.5, 1),
    morphTime = 1,
    pauseTime = 1;

timelineIntro.set(['svg', '.face-1'], {
        visibility: 'visible'
    })
    .from('#pumpkin', 1, {
        y: "-100%",
        ease: Bounce.easeOut
    })
    .from('#shadow', 1, {
        opacity: 0,
        scale: 0,
        transformOrigin: "50% 50%",
        ease: Bounce.easeOut
    }, '-=1')
    .from('.face-1', 0.5, {
        opacity: 0,
        ease: Bounce.easeIn
    });

function morphSVG() {
    timelineTopLayer.to('.face-1 .topLayer', morphTime, {
            morphSVG: '.face-4 .topLayer',
            ease: easing
        }, '+=' + pauseTime)
        .to('.face-1 .topLayer', morphTime, {
            morphSVG: '.face-8 .topLayer',
            ease: easing
        }, '+=' + pauseTime)
        .to('.face-1 .topLayer', morphTime, {
            morphSVG: '.face-5 .topLayer',
            ease: easing
        }, '+=' + pauseTime)
        .to('.face-1 .topLayer', morphTime, {
            morphSVG: '.face-2 .topLayer',
            ease: easing
        }, '+=' + pauseTime)
        .to('.face-1 .topLayer', morphTime, {
            morphSVG: '.face-7 .topLayer',
            ease: easing
        }, '+=' + pauseTime)
        .to('.face-1 .topLayer', morphTime, {
            morphSVG: '.face-3 .topLayer',
            ease: easing
        }, '+=' + pauseTime)
        .to('.face-1 .topLayer', morphTime, {
            morphSVG: '.face-6 .topLayer',
            ease: easing
        }, '+=' + pauseTime)
        .to('.face-1 .topLayer', morphTime, {
            morphSVG: '.face-9 .topLayer',
            ease: easing
        }, '+=' + pauseTime)
        .to('.face-1 .topLayer', morphTime, {
            morphSVG: originTopLayer,
            ease: easing
        }, '+=' + pauseTime);

timelineBottomLayer.to('.face-1 .bottomLayer', morphTime, {
            morphSVG: '.face-4 .bottomLayer',
            ease: easing
        }, '+=' + pauseTime)
        .to('.face-1 .bottomLayer', morphTime, {
            morphSVG: '.face-8 .bottomLayer',
            ease: easing
        }, '+=' + pauseTime)
        .to('.face-1 .bottomLayer', morphTime, {
            morphSVG: '.face-5 .bottomLayer',
            ease: easing
        }, '+=' + pauseTime)
        .to('.face-1 .bottomLayer', morphTime, {
            morphSVG: '.face-2 .bottomLayer',
            ease: easing
        }, '+=' + pauseTime)
        .to('.face-1 .bottomLayer', morphTime, {
            morphSVG: '.face-7 .bottomLayer',
            ease: easing
        }, '+=' + pauseTime)
        .to('.face-1 .bottomLayer', morphTime, {
            morphSVG: '.face-3 .bottomLayer',
            ease: easing
        }, '+=' + pauseTime)
        .to('.face-1 .bottomLayer', morphTime, {
            morphSVG: '.face-6 .bottomLayer',
            ease: easing
        }, '+=' + pauseTime)
        .to('.face-1 .bottomLayer', morphTime, {
            morphSVG: '.face-9 .bottomLayer',
            ease: easing
        }, '+=' + pauseTime)
        .to('.face-1 .bottomLayer', morphTime, {
            morphSVG: originBottomLayer,
            ease: easing
        }, '+=' + pauseTime);
}

编译

CSS

HTML

SVG Morphing Halloween Pumpkin

svg, plant

编辑器支持Emmet

快捷键

SVG Morphing Halloween Pumpkin

svg, plant

HTML5 SVG可在线定制面部表情的万圣节南瓜

HTML5 SVG黑森林月夜无头骑士和金光南瓜

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：