SOURCE

function begin_fly() {
    var $items = $(".item");
    var $texts = $(".item").find("div");
    $items.css({
        "top": 0,
        "left": 0
    });

    $texts.css({
        "opacity": 0,
        "font-size": 0
    });

    $items.each(function (index, value, array) {
        var $box = $(this);
        var $text = $box.find("div");
        var delayTime = Math.random() * 1000 * (index / 2);

        var left_distance = parseInt(Math.random() * -1000 + 500);
        left_distance = left_distance < 0 ? Math.min(left_distance, -250) : Math.max(left_distance, 250)

        var top_distance = parseInt(Math.random() * -1000 + 500);
        top_distance = top_distance < 0 ? Math.min(top_distance, -250) : Math.max(top_distance, 250)

        $text.delay(delayTime).animate(
            {
                opacity: '1',
                fontSize: '500%'
            }, 5000, begin_fly)

        $box.delay(delayTime).animate(
            {
                left: left_distance + 'px',
                top: top_distance + 'px',
            }, 5000, begin_fly);


    })
}
window.onload = function () {
    begin_fly();
}

<div class="wrap">
        <div class="container">
            <ul>
                <li class="item">
                    <div>JAVA</div>
                </li>
                <li class="item">
                    <div>设计模式</div>
                </li>
                <li class="item">
                    <div> 算法</div>
                </li>
                <li class="item">
                    <div>数据结构</div>
                </li>
                <li class="item">
                    <div>javascript</div>
                </li>
                <li class="item">
                    <div>build</div>
                </li>
                <li class="item">
                    <div>spring</div>
                </li>
                <li class="item">
                    <div>排序</div>
                </li>
                <li class="item">
                    <div>tool</div>
                </li>
                <li class="item">
                    <div>react</div>
                </li>
                <li class="item">
                    <div>es6</div>
                </li>
                <li class="item">
                    <div>TypeScript</div>
                </li>
            </ul>
        </div>

    </div>

.wrap{
    width: 300px;
    height: 300px;
    background-color: #009688;
    position: relative;
    overflow: hidden;
    color: #9C27B0;
    font-weight: 500;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.container{
    position: relative;
    margin: 0;
    padding: 0;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}
.item{
    position: absolute;
}
.item div{
    white-space: nowrap;
    margin: 0;
    padding: 0;
    font-size: 0;
}