视觉错觉 VII: 鼓起的棋盘

Bulging Checkerboard：平面图出现中间鼓起的视觉错觉参考链接： http://www.michaelbach.de/ot/geom_KitaokaBulge/index.html

illusion

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: white;
}
.container {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content {
    width: 520px;
    height: 520px;
    position: relative;
}
.content:hover .diag1:before,
.content:hover .diag1:after,
.content:hover .diag2:before,
.content:hover .diag2:after,
.content:hover .diag3:before,
.content:hover .diag3:after,
.content:hover .diag4:before,
.content:hover .diag4:after,
.content:hover .up:before,
.content:hover .up:after,
.content:hover .left:before,
.content:hover .left:after,
.content:hover .right:before,
.content:hover .right:after,
.content:hover .down:before,
.content:hover .down:after {
    display: none;
}
.box {
    width: 40px;
    height: 40px;
    background: #000;
    padding: 0;
    margin: 0;
    float: left;
    position: relative;
}
.down:before {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 2px;
    border-radius: 0px;
    background: #fff;
    bottom: 0;
    left: 0;
}
.down:after {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 2px;
    border-radius: 0px;
    background: #fff;
    bottom: 0;
    right: 0;
}
.right:before {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 2px;
    border-radius: 0px;
    background: #fff;
    bottom: 0;
    right: 0;
}
.right:after {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 2px;
    border-radius: 0px;
    background: #fff;
    top: 0;
    right: 0;
}
.left:before {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 2px;
    border-radius: 0px;
    background: #fff;
    bottom: 0;
    left: 0;
}
.left:after {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 2px;
    border-radius: 0px;
    background: #fff;
    top: 0;
    left: 0;
}
.up:before {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 2px;
    border-radius: 0px;
    background: #fff;
    top: 0;
    left: 0;
}
.up:after {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 2px;
    border-radius: 0px;
    background: #fff;
    top: 0;
    right: 0;
}
.diag1:before {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 2px;
    border-radius: 0px;
    background: #fff;
    bottom: 0;
    left: 0;
}
.diag1:after {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 2px;
    border-radius: 0px;
    background: #fff;
    top: 0;
    right: 0;
}
.diag2:before {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 2px;
    border-radius: 0px;
    background: #fff;
    top: 0;
    left: 0;
}
.diag2:after {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 2px;
    border-radius: 0px;
    background: #fff;
    bottom: 0;
    right: 0;
}
.diag3:before {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 2px;
    border-radius: 0px;
    background: #fff;
    top: 0;
    left: 0;
}
.diag3:after {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 2px;
    border-radius: 0px;
    background: #fff;
    bottom: 0;
    right: 0;
}
.diag4:before {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 2px;
    border-radius: 0px;
    background: #fff;
    bottom: 0;
    left: 0;
}
.diag4:after {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 2px;
    border-radius: 0px;
    background: #fff;
    top: 0;
    right: 0;
}
.box:nth-child(2n) {
    background: #fff;
}
.box:nth-child(2n):after,
.box:nth-child(2n):before {
    background: #000;
}

HTML

Bulging Checkerboard：平面图出现中间鼓起的视觉错觉参考链接： http://www.michaelbach.de/ot/geom_KitaokaBulge/index.html

illusion

编辑器支持Emmet

快捷键

Bulging Checkerboard：平面图出现中间鼓起的视觉错觉 参考链接： http://www.michaelbach.de/ot/geom_KitaokaBulge/index.html

illusion

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Bulging Checkerboard：平面图出现中间鼓起的视觉错觉参考链接： http://www.michaelbach.de/ot/geom_KitaokaBulge/index.html