一、效果

此效果主要是CSS的功劳，js代码仅做了随机让某个item进行旋转。

二、样式代码

<style>
/* 定义外层框大小和样式 */
.content {
    width: 600px;
    height: 280px;
    border: 1px solid gray;

    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    align-content: flex-start;
    -webkit-align-content: flex-start;
}

/* 每个 item 大小为40 像素 */
.content .item {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;
    -webkit-transition-duration: 300ms;
    -moz-transition-duration: 300ms;
    -ms-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    transition-duration: 300ms;
}

/* 通过 before 和 after 显示白色圆圈， 再通过 left 和 top 让其显示一部分*/
/* 多个 item 结合起来，就感觉像是连串的了。 */
.content .item::before {
    content: ' ';
    position: absolute;
    width: 34px;
    height: 34px;
    left: -20px;
    top: -20px;
    border: 4px solid #FFF;
    border-radius: 9999px;
}
.content .item::after {
    content: ' ';
    position: absolute;
    width: 34px;
    height: 34px;
    right: -20px;
    bottom: -20px;
    border: 4px solid #FFF;
    border-radius: 9999px;
}

/* 定义旋转度数,每当某个item进行旋转时，应用此class即进行旋转。 */
.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
</style>

三、Html代码

<div class="content">
    <div class="item"></div>
    <!-- ... 这中间一共103个 ... -->
    <div class="item"></div>
</div>

四、JavaScript代码

$(function () {
    /**
     * 随机旋转一个item
     */
    function rotateRandom () {
        // 找到所有的item
        var items = $(".content .item");
        // 随机获取一个item位置
        var index = parseInt("" + (Math.random() * items.length));
        var $item = items.eq(index);
        // 已经被旋转过则恢复，没有被旋转过则旋转
        if ($item.hasClass("rotate90")) {
            $item.removeClass("rotate90");
        } else {
            $item.addClass("rotate90");
        }
    }
    // 走你！
    setInterval(function () {
        rotateRandom();
    }, 500);
});