SVG 儿童卡通动画 - 熊宝宝的乐园

漂浮的云彩、害羞的太阳、树木落叶、零落的花草、流水。

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var scene = document.getElementById('scene');
var mainTl = new TimelineMax();
var replayBtn = document.querySelector('#replay');

// Goreground shapes
var foregroundGrass = scene.querySelectorAll('#foreground-grass path');
var rightTriangles = scene.querySelectorAll('#right-triangles path');
var foregroundShapes = scene.getElementById('foreground-shapes').childNodes;

// Trees
var leftTree = scene.getElementById('left-tree');
var leftTreeTrunk = leftTree.querySelector('#left-tree-trunk');
var leftTreeBorder = leftTree.querySelector('#left-tree-border');
var leftTreeLeaves = leftTree.querySelectorAll('#left-tree-leaves path');

var rightTree = scene.getElementById('right-tree');
var rightTreeTrunk = rightTree.querySelector('#right-tree-trunk');
var rightTreeBorder = rightTree.querySelector('#right-tree-border');
var rightTreeLeaves = rightTree.querySelectorAll('#right-tree-leaves path');

var topTree = scene.getElementById('top-tree');
var topTreeTrunk = topTree.querySelector('#top-tree-trunk');
var topTreeBorder = topTree.querySelector('#top-tree-border');
var topTreeLeaves = topTree.querySelectorAll('#top-tree-leaves path');

// Cloud, Rain & water
var water = scene.querySelectorAll('#water path');
var rain = scene.querySelector('#rain').childNodes;
var cloud = scene.querySelector('#cloud');

// Sun
var sun = scene.querySelector('#sun');
var sunEyes = sun.querySelector('#sun-eyes');

// Bear
var bear = scene.querySelector('#bear');
var leaf = scene.querySelector('#leaf');
var bearMembers = bear.childNodes;

// Timelines
var foregroundGrassTl = new TimelineMax({
    repeat: -1,
    yoyo: true
});
var leftTreeLeavesTl = new TimelineMax({
    repeat: -1,
    yoyo: true,
    paused: true
});
var rightTreeLeavesTl = new TimelineMax({
    repeat: -1,
    yoyo: true,
    paused: true
});
var topTreeLeavesTl = new TimelineMax({
    repeat: -1,
    yoyo: true
});
var rightTrianglesTl = new TimelineMax({
    repeat: -1,
    yoyo: true,
    paused: true
});
var foregroundShapesTl = new TimelineMax({
    repeat: -1,
    yoyo: true,
    paused: true
});
var waterTl = new TimelineMax({
    repeat: -1,
    yoyo: true,
    paused: true
});
var rainTl = new TimelineMax({
    repeat: -1,
    paused: true
});

// Main animation timeline
mainTl
    .staggerFrom(rightTriangles, 0.3, {
        opacity: 0,
        y: '100%',
        ease: Back.easeOut
    }, 0.1, 0)
    .staggerFrom(foregroundShapes, 0.1, {
        opacity: 0,
        y: '50%',
        scale: 0,
        ease: Sine.easeOut
    }, 0.05, 0)
    .addCallback(rightTrianglesLoop, '+=0')
    .addCallback(foregroundShapesLoop, '+=0')

.from(sun, 0.6, {
        opacity: 0,
        scale: 0,
        ease: Back.easeOut
    }, 1.5)
    .from(sunEyes, 0.4, {
        opacity: 0,
        y: '30%',
        ease: Back.easeOut
    }, '+=0.1')
    .from(cloud, 0.7, {
        opacity: 0,
        scale: 0,
        y: '30%',
        ease: Back.easeOut
    }, '-=0.1')
    .from(water, 0.7, {
        opacity: 0,
        scale: 0,
        y: '30%',
        ease: Back.easeOut
    }, '-=0.1')
    .addCallback(waterLoop, '+=0')
    .addCallback(rainLoop, '+=0')

.from(rightTreeTrunk, 0.4, {
        opacity: 0,
        transformOrigin: '50% 50%',
        scale: 0,
        ease: Sine.easeOut
    }, 1.4)
    .staggerFrom(rightTreeLeaves, 0.1, {
        scale: 0,
        ease: Sine.easeOut
    }, 0.05, 1.6)
    .from(rightTreeBorder, 0.2, {
        opacity: 0,
        y: '10%',
        scale: 0,
        ease: Sine.easeOut
    }, 1.7)
    .addCallback(rightTreeLeavesLoop, '+=0')

.from(leftTreeTrunk, 0.4, {
        opacity: 0,
        transformOrigin: '50% 50%',
        scale: 0,
        ease: Sine.easeOut
    }, 2)
    .staggerFrom(leftTreeLeaves, 0.1, {
        scale: 0,
        ease: Sine.easeOut
    }, 0.05, 2.3)
    .from(leftTreeBorder, 0.2, {
        opacity: 0,
        y: '10%',
        scale: 0,
        ease: Sine.easeOut
    }, 2.4)
    .addCallback(leftTreeLeavesLoop, '+=0')

.from(topTreeTrunk, 0.3, {
        opacity: 0,
        transformOrigin: '50% 50%',
        scale: 0,
        ease: Sine.easeOut
    }, 2.3)
    .staggerFrom(topTreeLeaves, 0.1, {
        scale: 0,
        ease: Sine.easeOut
    }, 0.05, 2.6)
    .from(topTreeBorder, 0.4, {
        opacity: 0,
        y: '10%',
        scale: 0,
        ease: Sine.easeOut
    }, 2.7)
    .addCallback(topTreeLeavesLoop, '+=0')

.staggerFrom(bearMembers, 0.4, {
        scale: 0,
        transformOrigin: '50% 50%',
        ease: Back.easeOut
    }, 0.1, 2.3)
    .from(leaf, 0.3, {
        scale: 0,
        transformOrigin: '50% 50%',
        ease: Back.easeOut
    }, '-=0.3')
    .addCallback(moovingArms, '+=0')

// Loops
foregroundGrassTl.fromTo(foregroundGrass, 2, {
    scale: 1
}, {
    scale: 1.1,
    rotation: '25deg'
});
leftTreeLeavesTl.staggerTo(leftTreeLeaves, 1, {
    rotation: '45deg',
    ease: Sine.easeOut
}, 0.07);
rightTreeLeavesTl.staggerTo(rightTreeLeaves, 1.5, {
    rotation: '40deg',
    ease: Cubic.easeOut
}, 0.05);
rightTrianglesTl.staggerTo(rightTriangles, 1, {
    rotation: '10deg',
    ease: Cubic.easeOut
}, 0.1)
foregroundShapesTl.staggerTo(foregroundShapes, 1.5, {
    scale: '0.9',
    ease: Sine.easeOut
}, 0.1);
waterTl.staggerTo(water, 1.5, {
    x: '5%',
    ease: Sine.easeOut
});
rainTl.staggerFromTo(rain, 4, {
    opacity: 0
}, {
    opacity: 0.4,
    y: '100%',
    ease: Sine.easeOut
}, 0.1, 0.4);

// Replay binding event
replayBtn.addEventListener('click', replay, false);

// Loop callback from mainTl
function leftTreeLeavesLoop() {
    leftTreeLeavesTl.play();
}

function rightTreeLeavesLoop() {
    rightTreeLeavesTl.play();
}

function topTreeLeavesLoop() {
    topTreeLeavesTl.staggerFrom(topTreeLeaves, 1, {
        scale: '0.2',
        ease: Cubic.easeOut
    }, 0.03);
}

function rightTrianglesLoop() {
    rightTrianglesTl.play();
}

function foregroundShapesLoop() {
    foregroundShapesTl.play();
}

function waterLoop() {
    waterTl.play();
}

function rainLoop() {
    rainTl.play();
}

function moovingArms() {

bear.classList.add('moving-arm');
    leaf.classList.add('moving-leaf');
}

function replay() {
    bear.classList.remove('moving-arm');
    leaf.classList.remove('moving-leaf');
    mainTl.seek(0);
    rainTl.seek(0);
    topTreeLeavesLoop.seek(0);
}

编译

CSS

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fffce4;
}
#scene {
    display: block;
    margin: 2% auto 0;
    height: 98%;
}
.credits {
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.credits a {
    font-size: 12px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #202020;
}
.credits a:hover {
    color: #3498db;
}
#replay {
    outline: none;
    font-size: 15px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    padding: 5px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    color: white;
    border: 0;
    background: #3498db;
}
#replay:hover {
    background: #5faee3;
}
#rain * {
    opacity: 0;
}
.tr-c {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
}
#cloud {
    -webkit-animation: cloud 10s ease infinite;
    animation: cloud 10s ease infinite;
}
#sun-border {
    -webkit-animation: sunborder 60s linear infinite;
    animation: sunborder 60s linear infinite;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
}
#butterfly {
    -webkit-animation: butterfly 5s linear infinite;
    animation: butterfly 5s linear infinite;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
}
.jowl {
    -webkit-animation: jowl 2s ease infinite;
    animation: jowl 2s ease infinite;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
}
.moving-arm #left-arm {
    -webkit-animation: leftarm 2s ease infinite;
    animation: leftarm 2s ease infinite;
    -webkit-transform-origin: center right;
    -ms-transform-origin: center right;
    transform-origin: center right;
}
.moving-arm #right-arm {
    -webkit-animation: rightarm 2s ease infinite;
    animation: rightarm 2s ease infinite;
    -webkit-transform-origin: center left;
    -ms-transform-origin: center left;
    transform-origin: center left;
}
.moving-leaf#leaf {
    -webkit-animation: leaf 2s ease infinite;
    animation: leaf 2s ease infinite;
    -webkit-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    transform-origin: bottom right;
}
@-webkit-keyframes cloud {
    0%, 100% {
        -webkit-transform: translate(3%) rotate(-2deg);
        transform: translate(3%) rotate(-2deg);
    }
    50% {
        -webkit-transform: translate(-20%) rotate(3deg);
        transform: translate(-20%) rotate(3deg);
    }
}
@keyframes cloud {
    0%, 100% {
        -webkit-transform: translate(3%) rotate(-2deg);
        transform: translate(3%) rotate(-2deg);
    }
    50% {
        -webkit-transform: translate(-20%) rotate(3deg);
        transform: translate(-20%) rotate(3deg);
    }
}
@-webkit-keyframes sunborder {
    0% {
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
    50% {
        -webkit-transform: scale(0.8) rotate(180deg);
        transform: scale(0.8) rotate(180deg);
    }
    100% {
        -webkit-transform: scale(1) rotate(360deg);
        transform: scale(1) rotate(360deg);
    }
}
@keyframes sunborder {
    0% {
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
    50% {
        -webkit-transform: scale(0.8) rotate(180deg);
        transform: scale(0.8) rotate(180deg);
    }
    100% {
        -webkit-transform: scale(1) rotate(360deg);
        transform: scale(1) rotate(360deg);
    }
}
@-webkit-keyframes butterfly {
    0%, 100% {
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
    25% {
        -webkit-transform: scale(0.9) rotate(-10deg) translate3d(3%, -10%, 0);
        transform: scale(0.9) rotate(-10deg) translate3d(3%, -10%, 0);
    }
    50% {
        -webkit-transform: scale(1) rotate(4deg) translate3d(-10%, -20%, 0);
        transform: scale(1) rotate(4deg) translate3d(-10%, -20%, 0);
    }
}
@keyframes butterfly {
    0%, 100% {
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
    25% {
        -webkit-transform: scale(0.9) rotate(-10deg) translate3d(3%, -10%, 0);
        transform: scale(0.9) rotate(-10deg) translate3d(3%, -10%, 0);
    }
    50% {
        -webkit-transform: scale(1) rotate(4deg) translate3d(-10%, -20%, 0);
        transform: scale(1) rotate(4deg) translate3d(-10%, -20%, 0);
    }
}
@-webkit-keyframes jowl {
    0%, 100% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -webkit-transform: scale(0.85);
        transform: scale(0.85);
    }
}
@keyframes jowl {
    0%, 100% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -webkit-transform: scale(0.85);
        transform: scale(0.85);
    }
}
@-webkit-keyframes leftarm {
    0%, 100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
}
@keyframes leftarm {
    0%, 100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
}
@-webkit-keyframes rightarm {
    0%, 100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        -webkit-transform: translateY(-5%) rotate(-2deg);
        transform: translateY(-5%) rotate(-2deg);
    }
}
@keyframes rightarm {
    0%, 100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        -webkit-transform: translateY(-5%) rotate(-2deg);
        transform: translateY(-5%) rotate(-2deg);
    }
}
@-webkit-keyframes leaf {
    0%, 100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        -webkit-transform: translate3d(3%, 4%, 0) rotate(-5deg);
        transform: translate3d(3%, 4%, 0) rotate(-5deg);
    }
}
@keyframes leaf {
    0%, 100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        -webkit-transform: translate3d(3%, 4%, 0) rotate(-5deg);
        transform: translate3d(3%, 4%, 0) rotate(-5deg);
    }
}

HTML

<button id="replay">
    Replay
</button>

漂浮的云彩、害羞的太阳、树木落叶、零落的花草、流水。

编辑器支持Emmet

快捷键

漂浮的云彩、害羞的太阳、树木落叶、零落的花草、流水。

分别使用SVG path和CSS3 motion-path实现的粒子漂浮动画

HTML5 SVG 滤镜特效 - 水波涟漪动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：