视觉错觉IX：樱草花园（波动幻觉） - 踏得网

Illusion IX: Primrose's Field

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

第三方库
作品简介 1534
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
    background: #beff8e;
}
.container {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content {
    width: 760px;
    height: 560px;
    overflow: hidden;
    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: #3C993E;
    padding: 0;
    margin: 0;
    float: left;
    position: relative;
}
.pink:after {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 0px;
    border-radius: 0px 0px;
    transform: rotate(45deg);
    z-index: 10;
    bottom: -4px;
    right: -4px;
    background: #B63762;
}
.white:after {
    width: 10px;
    height: 10px;
    position: absolute;
    content: "";
    margin: 0px;
    border-radius: 0px 0px;
    transform: rotate(45deg);
    z-index: 10;
    bottom: -4px;
    right: -4px;
    background: #FFF;
}
.box:nth-child(2n) {
    background: #93FF41;
}
body {
    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%;
    z-index: 20;
    text-align: center;
    background: #cdffa7;
}

HTML

<div class='container'>
    <div class='content'>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
        <div class='box white'></div>
        <div class='box pink'></div>
        <div class='box white'></div>
    </div>
</div>