视觉错觉 II：平行线

Illusion II: Parallel Lines。平行线看起来像交叉线。

illusion

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.squares {
    width: 880px;
    height: 826px;
    overflow: hidden;
}
.block,
.block:after {
    width: 55px;
    height: 55px;
    background: #000;
    padding-left: 55px;
    content: "";
    float: left;
    position: relative;
}
.block:after {
    background: #fff;
    position: absolute;
    left: 55px;
    top: 0;
}
.row {
    border-top: 4px solid #4d4d4d;
    height: 55px;
    width: 150%;
    -webkit-animation: EXPAND 5s infinite;
    animation: EXPAND 5s infinite;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}
.row:nth-last-child(1) {
    border-bottom: 4px solid #4d4d4d;
}
.row:nth-child(2n) {
    padding-left: 33px;
}
@-webkit-keyframes EXPAND {
    50% {
        padding-left: 0px;
    }
}
@keyframes EXPAND {
    50% {
        padding-left: 0px;
    }
}
.caption {
    background: #fff;
    color: #000;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    font-size: 2em;
    text-align: center;
    width: 100%;
    font-family: Open Sans, sans-serif;
}

HTML

<div class='caption'>
    There are no curved lines.
</div>
<div class='container'>
    <div class='squares'>
        <div class='row'>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
        </div>
        <div class='row'>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
        </div>
        <div class='row'>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
        </div>
        <div class='row'>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
        </div>
        <div class='row'>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
        </div>
        <div class='row'>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
        </div>
        <div class='row'>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
        </div>
        <div class='row'>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
        </div>
        <div class='row'>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
        </div>
        <div class='row'>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
        </div>
        <div class='row'>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
        </div>
        <div class='row'>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
            <div class='block'></div>
        </div>
    </div>
</div>

Illusion II: Parallel Lines。平行线看起来像交叉线。

illusion

编辑器支持Emmet

快捷键

Illusion II: Parallel Lines。平行线看起来像交叉线。

illusion

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：