SVG 3D球体在台阶上掉落动画

3D Ball Dropper

SVG, 掉落，球

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var container = document.getElementById('container');
var plane0 = document.getElementById('plane0');
var plane1 = document.getElementById('plane1');
var plane2 = document.getElementById('plane2');
var plane3 = document.getElementById('plane3');
var slideplaneL = document.getElementById('slideplaneL');
var slideplaneR = document.getElementById('slideplaneR');
var ball = document.getElementById('ball');

TweenMax.set([container], {
    position: 'absolute',
    //perspectiveOrigin:'150% 0%',
    perspective: 400,
    top: '50%',
    left: '50%',
    xPercent: -50,
    yPercent: -50
})
TweenMax.set(sideplaneL, {
    tranformOrigin: '50% 50%',
    rotationY: 95,
    x: '-=200',
    y: -200,
    z: -100
})

TweenMax.set(sideplaneR, {
    tranformOrigin: '50% 50%',
    rotationY: -95,
    x: '+=200',
    y: -200,
    z: 100
})

var tl = new TimelineMax({
    repeat: -1,
    repeatDelay: 0
});
tl.timeScale(1);
tl.set([plane0, plane1, plane2, plane3], {
        //transformPerspective:600,
        tranformOrigin: '50% 50%',
        rotationX: 90
    })
    .set(ball, {
        x: 275,
        y: 175,
        z: 15,
        zIndex: 10
    })
    .set(plane0, {
        y: 0
    })
    .set(plane1, {
        y: -100
    })
    .set(plane2, {
        y: -200
    })
    .set(plane3, {
        y: -300
    })

.to([plane0, plane1, plane2, plane3], 2, {
    y: '-=100',
    force3D: true,
    ease: Linear.easeNone
})

.to(ball, 1.5, {
    y: '-=84',
    ease: Linear.easeNone
}, '-=2')

.to(ball, 0.5, {
    y: 175,
    ease: Bounce.easeOut
}, '-=0.5')

编译

CSS

HTML

<svg id="ball" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:a="https://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="41px" height="41px" viewBox="0 0 41 41" enable-background="new 0 0 41 41"
    xml:space="preserve">
        <defs>
        </defs>
        <circle fill="#fff" stroke="#027767" stroke-width="6" stroke-miterlimit="10" cx="20" cy="20" r="10" />
    </svg>
    <div class="plane side" id="sideplaneL" /></div>
<div class="plane side" id="sideplaneR" /></div>
<div class="plane" id="plane0" /></div>
<div class="plane" id="plane1" /></div>
<div class="plane" id="plane2" /></div>
<div class="plane" id="plane3" /></div>

</div>

3D Ball Dropper

SVG, 掉落，球

编辑器支持Emmet

快捷键

3D Ball Dropper

SVG, 掉落，球

SVG 四面体在线构造器（含3D旋转动画）

SVG+CSS3 3D环球旅行动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：