视觉错觉 VIII: 滚轴

Illusion VIII: Rollers。看起来像是3个相链接的滚轴，并且在缓缓滚动。

illusion

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

第三方库
作品简介 1160
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.container {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
body {
    background: gold;
    color: #000;
    font-size: 1.25em;
    text-align: center;
    width: 100%;
    font-family: Open Sans, sans-serif;
    margin: 0%;
}
a,
a:hover,
a:visited {
    color: blue;
    text-decoration: none;
}
.caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background: #ffe766;
}
.content {
    width: 80%;
    padding: 10px;
    position: relative;
    height: 550px;
}
.roller {
    width: 33.3%;
    float: left;
}
.roller:nth-child(odd) .oval {
    border-right: 3px solid #fff;
    border-left: 3px solid #000;
}
.base {
    width: 13.5%;
    height: 50px;
    position: relative;
    margin: 0px auto;
    margin-bottom: 20px;
}
.oval {
    width: 80%;
    height: 99%;
    background: blue;
    border-radius: 100% 100%;
    position: absolute;
    border-right: 3px solid #000;
    border-left: 3px solid #fff;
}
.right {
    right: 140%;
    top: 0px;
}
.left {
    left: 140%;
    top: 0px;
}

HTML

<div class='container'>
    <div class='content'>
        <div class='roller'>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='roller'>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='roller'>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='base'>
                <div class='oval'>
                    <div class='oval right'>
                        <div class='oval right'>
                            <div class='oval right'>
                                <div class='oval right'></div>
                            </div>
                        </div>
                    </div>
                    <div class='oval left'>
                        <div class='oval left'>
                            <div class='oval left'>
                                <div class='oval left'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class='caption'>
    <p>Nothing is moving. Based on the original "Rollers" by <a href="https://www.ritsumei.ac.jp/~akitaoka/index-e.html">Akiyoshi</a>.</p>
</div>

Illusion VIII: Rollers。看起来像是3个相链接的滚轴，并且在缓缓滚动。

illusion

编辑器支持Emmet

快捷键

Illusion VIII: Rollers。看起来像是3个相链接的滚轴，并且在缓缓滚动。

illusion

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：