Scene.js 是一个基于 JavaScript 时间轴的动画库-BFW插件库

Scene.js 是一个基于 JavaScript 时间轴的动画库

Scene.js 是一个基于 JavaScript 时间轴的动画库，用于创建动画网站，作为一个动画时间轴库，它允许你创建对象的移动和位置的时间顺序。此外，由于 Scene.js 的语法类似于 CSS 动画，同时还支持 JavaScript 和 CSS 的播放方法，因此使用起来简单又方便。

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Scene.js example Shape CSS Animation</title>
    <style>
        .shape {
            position: absolute;
            border-radius: 50%;
            top: 100px;
            left: 0;
            right: 0;
            margin: 0px auto;
            width: 0;
            height: 0;
            border: 100px solid black;
        }
    </style>

</head>
<body translate="no">
    <p style="text-align: center;">
        <a href="https://github.com/daybrush/scenejs" target="_blank">https://github.com/daybrush/scenejs</a>
    </p>
    <div class="shape">
    </div>

    <script src='http://repo.bfw.wiki/bfwrepo/js/scene.min.js'></script>
    <script>
        var scene = new Scene({
            ".shape": {
                0: {
                    "border-radius": "0%",
                    "transform": "translateY(0px) rotate(0deg)"
                },

                1: {
                    "border-radius": "50%",
                    "transform": "translateY(150px) rotate(90deg)",
                    "border-color": "rgba(0, 0, 0, 1)",
                    "border-bottom-color": "rgba(0, 0, 0, 1)"
                },

                2: {
                    "transform": "translateY(0px) rotate(-180deg)",
                    "border-color": "rgba(0, 0, 0, 0)",
                    "border-bottom-color": "rgba(0, 0, 0, 1)",
                    "box-shadow": "0px 0px 0 0 black"
                },

                3: {
                    "border-radius": "50%",
                    "transform": "translateY(150px) rotate(105deg)",
                    "border-color": "rgba(0, 0, 0, 0)",
                    "border-bottom-color": "rgba(0, 0, 0, 0)",
                    "box-shadow": "-15px -20px 0px 0px black"
                },

                4: {
                    "border-radius": "0%",
                    "transform": "translateY(0px) rotate(0deg)",
                    "box-shadow": "0px 0px 0px 0px black",
                    "border-color": "rgba(0, 0, 0, 1)",
                    "border-bottom-color": "rgba(0, 0, 0, 1)"
                }
            }
        },


            {
                selector: true,
                iterationCount: "infinite",
                easing: Scene.EASE_IN_OUT
            });

        scene.playCSS();

    </script>
</body>
</html>

官网：https://github.com/daybrush/scenejs