使用SVG和GSAP实现的跷跷板动画

还包含盒子翻滚的动画。

SVG

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">

</head>

<body class="demo-2">
    <div class="container">
        <div class="content">
            <div class="svg-container" id="boxContainer">
                <svg id="boxLoader" width="70px" height="70px" viewBox="0 0 35 35" preserveAspectRatio="none">
                    <rect x="0" fill="#fff" width="35" height="35" />
                </svg>
                <svg id="base" width="210px" height="210px" viewBox="0 0 105 105" preserveAspectRatio="none">
                    <line stroke-width="1.5" fill="none" stroke="#383845" stroke-miterlimit="10" x1="0" y1="52.5" x2="105" y2="52.5" />
                </svg>
            </div>
        </div>
    </div>
    
    <script>
        (function() {
            var boxContainer = document.getElementById('boxContainer');
            var boxLoader = document.getElementById('boxLoader');
            var box = document.getElementById('box');
            var base = document.getElementById('base');

TweenMax.set([boxLoader, base], {
                position: 'absolute',
                top: '50%',
                left: '50%',
                xPercent: -50,
                yPercent: -50
            })

TweenMax.set([boxContainer], {
                position: 'absolute',
                top: '50%',
                left: '50%',
                xPercent: -50,
                yPercent: -50
            })

var tl = new TimelineMax({
                repeat: -1
            });

tl.timeScale(1.2)

tl.set(boxLoader, {
                    transformOrigin: '0% 100%',
                    left: '+=70',
                    top: '-=' + 70 / 2
                })
                .to(boxLoader, 1, {
                    rotation: '-=90',
                    ease: Power4.easeInOut
                })
                .set(boxLoader, {
                    transformOrigin: '0% 100%',
                    left: '-=70',
                    rotation: 0
                })
                .to(boxLoader, 1, {
                    rotation: '-=90',
                    ease: Power4.easeInOut
                })
                .set(boxLoader, {
                    transformOrigin: '0% 100%',
                    left: '-=70',
                    rotation: 0
                })
                .to(boxLoader, 1, {
                    rotation: '-=270',
                    ease: Power4.easeInOut
                })
                .to(boxContainer, 1, {
                    rotation: '+=180',
                    ease: Back.easeInOut
                }, '-=1')
                .set(boxLoader, {
                    transformOrigin: '100% 0%',
                    top: '+=70',
                    rotation: 0
                })
                .to(boxLoader, 1, {
                    rotation: '-=90',
                    ease: Power4.easeInOut
                })
                .set(boxLoader, {
                    transformOrigin: '100% 0%',
                    left: '+=70',
                    rotation: 0
                })
                .to(boxLoader, 1, {
                    rotation: '-=90',
                    ease: Power4.easeInOut
                })
                .set(boxLoader, {
                    transformOrigin: '100% 0%',
                    left: '+=70',
                    rotation: 0
                })
                .to(boxLoader, 1, {
                    rotation: '-=270',
                    ease: Power4.easeInOut
                })
                .to(boxContainer, 1, {
                    rotation: '+=180',
                    ease: Back.easeInOut
                }, '-=1')
        })();
    </script>

</body>

</html>

还包含盒子翻滚的动画。

SVG

编辑器支持Emmet

快捷键

还包含盒子翻滚的动画。

SVG

使用Vue和GSAP实现的柱状图动画图表

使用GSAP和SVG实现的摩托车动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：