使用CSS3网格布局（grid layout）实现的动画网格

CSS Grid Poster 从本例可以看到使用网格布局可以构造非常强大和灵活的布局。

CSS3

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body {
    margin: 0;
    padding: 0 10vmin;
}
@support (display: grid) {
    h1 {
        color: orange !important;
    }
}
.grid {
    display: grid;
    grid-template-columns: repeat(191, 2.72251px);
    grid-template-rows: repeat(250, 2.72251px);
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}
@media (max-width: 640px) {
    .grid {
        grid-template-columns: repeat(191, 0.41885vmin);
        grid-template-rows: repeat(250, 0.4vmin);
    }
}
.grid:before,
.grid:after {
    content: '';
    display: table;
}
.grid:before {
    float: left;
    padding-bottom: 100%;
}
.grid:after {
    clear: both;
}
.grid > div {
    -webkit-animation: animate .5s forwards;
    animation: animate .5s forwards;
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(-180deg);
    transform: scale(0.1) rotate(-180deg);
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
    counter-increment: cellcount;
    position: relative;
}
.grid > div:not(:last-of-type) {
    background-color: #666;
}
.grid > div:hover {
    z-index: 1;
    background-color: #282828;
    background-color: #b90000;
}
.grid > div:hover:before {
    content: counter(cellcount);
    font-size: 9px;
    font-family: sans-serif;
    padding: 4px;
    position: absolute;
    display: block;
    background-color: #b90000;
    color: #fff;
    font-weight: 700;
}
.grid > div:last-of-type {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44.4 53'%3E %3Cpath fill='%23666' d='M33.5 27.9c-.6-3.4 10.3-24.8 10.8-25.7.5-.9-.7-2-.7-2s-1.3-.6-2 .2-16.1 19.2-19.5 19.9C10.2 23 1.3 16.5.2 18.1c-1.4 2.1 3.7 9.1 6.8 12.1 2.4 3.8 1.7 8.1 1.2 10.1-3 9.9.7 12.1.7 12.1s3.5 2.5 11.5-4c1.7-1.2 5.4-3.4 9.8-2.7 4 1.7 12.4 3.7 13.8 1.6 1.1-1.7-8.4-7.4-10.5-19.4z'/%3E %3C/svg%3E");
    background-repeat: no-repeat;
}
@-webkit-keyframes animate {
    to {
        opacity: 1;
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
}
@keyframes animate {
    to {
        opacity: 1;
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
}
.grid > div:nth-of-type(1) {
    grid-area: 10 / 15 / 28 / 18;
    -webkit-animation-delay: 1.05s;
    animation-delay: 1.05s;
}
.grid > div:nth-of-type(2) {
    grid-area: 10 / 23 / 28 / 26;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
.grid > div:nth-of-type(3) {
    grid-area: 10 / 27 / 13 / 40;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
}
.grid > div:nth-of-type(4) {
    grid-area: 14 / 37 / 28 / 40;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
.grid > div:nth-of-type(5) {
    grid-area: 10 / 45 / 24 / 48;
    -webkit-animation-delay: 1.25s;
    animation-delay: 1.25s;
}
.grid > div:nth-of-type(6) {
    grid-area: 10 / 49 / 13 / 62;
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
}
.grid > div:nth-of-type(7) {
    grid-area: 25 / 45 / 28 / 62;
    -webkit-animation-delay: 1.35s;
    animation-delay: 1.35s;
}
.grid > div:nth-of-type(8) {
    grid-area: 10 / 67 / 13 / 84;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}
.grid > div:nth-of-type(9) {
    grid-area: 14 / 67 / 28 / 70;
    -webkit-animation-delay: 1.45s;
    animation-delay: 1.45s;
}
.grid > div:nth-of-type(10) {
    grid-area: 18 / 71 / 21 / 79;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
.grid > div:nth-of-type(11) {
    grid-area: 25 / 71 / 28 / 84;
    -webkit-animation-delay: 1.55s;
    animation-delay: 1.55s;
}
.grid > div:nth-of-type(12) {
    grid-area: 10 / 89 / 13 / 106;
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}
.grid > div:nth-of-type(13) {
    grid-area: 14 / 89 / 28 / 92;
    -webkit-animation-delay: 1.65s;
    animation-delay: 1.65s;
}
.grid > div:nth-of-type(14) {
    grid-area: 18 / 93 / 21 / 106;
    -webkit-animation-delay: 1.7s;
    animation-delay: 1.7s;
}
.grid > div:nth-of-type(15) {
    grid-area: 14 / 103 / 17 / 106;
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
}
.grid > div:nth-of-type(16) {
    grid-area: 10 / 110 / 13 / 128;
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}
.grid > div:nth-of-type(17) {
    grid-area: 14 / 118 / 28 / 121;
    -webkit-animation-delay: 1.85s;
    animation-delay: 1.85s;
}
.grid > div:nth-of-type(18) {
    grid-area: 10 / 133 / 28 / 136;
    -webkit-animation-delay: 1.9s;
    animation-delay: 1.9s;
}
.grid > div:nth-of-type(19) {
    grid-area: 10 / 141 / 13 / 158;
    -webkit-animation-delay: 1.95s;
    animation-delay: 1.95s;
}
.grid > div:nth-of-type(20) {
    grid-area: 14 / 141 / 28 / 144;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.grid > div:nth-of-type(21) {
    grid-area: 25 / 145 / 28 / 158;
    -webkit-animation-delay: 2.05s;
    animation-delay: 2.05s;
}
.grid > div:nth-of-type(22) {
    grid-area: 14 / 155 / 24 / 158;
    -webkit-animation-delay: 2.1s;
    animation-delay: 2.1s;
}
.grid > div:nth-of-type(23) {
    grid-area: 10 / 163 / 28 / 166;
    -webkit-animation-delay: 2.15s;
    animation-delay: 2.15s;
}
.grid > div:nth-of-type(24) {
    grid-area: 10 / 167 / 13 / 180;
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}
.grid > div:nth-of-type(25) {
    grid-area: 14 / 177 / 28 / 180;
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.grid > div:nth-of-type(26) {
    grid-area: 41 / 1 / 78 / 84;
    -webkit-animation-delay: 2.3s;
    animation-delay: 2.3s;
}
.grid > div:nth-of-type(27) {
    grid-area: 41 / 86 / 118 / 98;
    -webkit-animation-delay: 2.35s;
    animation-delay: 2.35s;
}
.grid > div:nth-of-type(28) {
    grid-area: 119 / 86 / 122 / 98;
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
}
.grid > div:nth-of-type(29) {
    grid-area: 122 / 86 / 145 / 126;
    -webkit-animation-delay: 2.45s;
    animation-delay: 2.45s;
}
.grid > div:nth-of-type(30) {
    grid-area: 41 / 102 / 120 / 126;
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.grid > div:nth-of-type(31) {
    grid-area: 41 / 131 / 73 / 193;
    -webkit-animation-delay: 2.55s;
    animation-delay: 2.55s;
}
.grid > div:nth-of-type(32) {
    grid-area: 79 / 1 / 84 / 15;
    -webkit-animation-delay: 2.6s;
    animation-delay: 2.6s;
}
.grid > div:nth-of-type(33) {
    grid-area: 79 / 16 / 84 / 26;
    -webkit-animation-delay: 2.65s;
    animation-delay: 2.65s;
}
.grid > div:nth-of-type(34) {
    grid-area: 79 / 27 / 84 / 41;
    -webkit-animation-delay: 2.7s;
    animation-delay: 2.7s;
}
.grid > div:nth-of-type(35) {
    grid-area: 86 / 1 / 123 / 41;
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s;
}
.grid > div:nth-of-type(36) {
    grid-area: 79 / 43 / 110 / 57;
    -webkit-animation-delay: 2.8s;
    animation-delay: 2.8s;
}
.grid > div:nth-of-type(37) {
    grid-area: 79 / 58 / 110 / 61;
    -webkit-animation-delay: 2.85s;
    animation-delay: 2.85s;
}
.grid > div:nth-of-type(38) {
    grid-area: 79 / 62 / 110 / 64;
    -webkit-animation-delay: 2.9s;
    animation-delay: 2.9s;
}
.grid > div:nth-of-type(39) {
    grid-area: 79 / 65 / 110 / 68;
    -webkit-animation-delay: 2.95s;
    animation-delay: 2.95s;
}
.grid > div:nth-of-type(40) {
    grid-area: 79 / 69 / 110 / 71;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.grid > div:nth-of-type(41) {
    grid-area: 86 / 72 / 110 / 84;
    -webkit-animation-delay: 3.05s;
    animation-delay: 3.05s;
}
.grid > div:nth-of-type(42) {
    grid-area: 125 / 1 / 204 / 28;
    -webkit-animation-delay: 3.1s;
    animation-delay: 3.1s;
}
.grid > div:nth-of-type(43) {
    grid-area: 207 / 1 / 251 / 28;
    -webkit-animation-delay: 3.15s;
    animation-delay: 3.15s;
}
.grid > div:nth-of-type(44) {
    grid-area: 226 / 28 / 251 / 62;
    -webkit-animation-delay: 3.2s;
    animation-delay: 3.2s;
}
.grid > div:nth-of-type(45) {
    grid-area: 124 / 31 / 139 / 57;
    -webkit-animation-delay: 3.25s;
    animation-delay: 3.25s;
}
.grid > div:nth-of-type(46) {
    grid-area: 141 / 31 / 145 / 69;
    -webkit-animation-delay: 3.3s;
    animation-delay: 3.3s;
}
.grid > div:nth-of-type(47) {
    grid-area: 147 / 31 / 195 / 69;
    -webkit-animation-delay: 3.35s;
    animation-delay: 3.35s;
}
.grid > div:nth-of-type(48) {
    grid-area: 76 / 131 / 108 / 193;
    -webkit-animation-delay: 3.4s;
    animation-delay: 3.4s;
}
.grid > div:nth-of-type(49) {
    grid-area: 110 / 131 / 128 / 133;
    -webkit-animation-delay: 3.45s;
    animation-delay: 3.45s;
}
.grid > div:nth-of-type(50) {
    grid-area: 110 / 134 / 128 / 136;
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
}
.grid > div:nth-of-type(51) {
    grid-area: 108 / 138 / 140 / 160;
    -webkit-animation-delay: 3.55s;
    animation-delay: 3.55s;
}
.grid > div:nth-of-type(52) {
    grid-area: 110 / 161 / 114 / 192;
    -webkit-animation-delay: 3.6s;
    animation-delay: 3.6s;
}
.grid > div:nth-of-type(53) {
    grid-area: 121 / 161 / 123 / 192;
    -webkit-animation-delay: 3.65s;
    animation-delay: 3.65s;
}
.grid > div:nth-of-type(54) {
    grid-area: 125 / 168 / 205 / 192;
    -webkit-animation-delay: 3.7s;
    animation-delay: 3.7s;
}
.grid > div:nth-of-type(55) {
    grid-area: 143 / 138 / 148 / 165;
    -webkit-animation-delay: 3.75s;
    animation-delay: 3.75s;
}
.grid > div:nth-of-type(56) {
    grid-area: 149 / 138 / 158 / 165;
    -webkit-animation-delay: 3.8s;
    animation-delay: 3.8s;
}
.grid > div:nth-of-type(57) {
    grid-area: 160 / 138 / 164 / 165;
    -webkit-animation-delay: 3.85s;
    animation-delay: 3.85s;
}
.grid > div:nth-of-type(58) {
    grid-area: 166 / 138 / 170 / 165;
    -webkit-animation-delay: 3.9s;
    animation-delay: 3.9s;
}
.grid > div:nth-of-type(59) {
    grid-area: 172 / 138 / 176 / 165;
    -webkit-animation-delay: 3.95s;
    animation-delay: 3.95s;
}
.grid > div:nth-of-type(60) {
    grid-area: 178 / 138 / 187 / 165;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}
.grid > div:nth-of-type(61) {
    grid-area: 188 / 138 / 205 / 165;
    -webkit-animation-delay: 4.05s;
    animation-delay: 4.05s;
}
.grid > div:nth-of-type(62) {
    grid-area: 208 / 149 / 251 / 192;
    -webkit-animation-delay: 4.1s;
    animation-delay: 4.1s;
}
.grid > div:nth-of-type(63) {
    grid-area: 208 / 131 / 251 / 145;
    -webkit-animation-delay: 4.15s;
    animation-delay: 4.15s;
}
.grid > div:nth-of-type(64) {
    grid-area: 223 / 92 / 251 / 129;
    -webkit-animation-delay: 4.2s;
    animation-delay: 4.2s;
}
.grid > div:nth-of-type(65) {
    grid-area: 214 / 92 / 223 / 121;
    -webkit-animation-delay: 4.25s;
    animation-delay: 4.25s;
}
.grid > div:nth-of-type(66) {
    grid-area: 198 / 92 / 214 / 107;
    -webkit-animation-delay: 4.3s;
    animation-delay: 4.3s;
}
.grid > div:nth-of-type(67) {
    grid-area: 180 / 71 / 189 / 97;
    -webkit-animation-delay: 4.35s;
    animation-delay: 4.35s;
}
.grid > div:nth-of-type(68) {
    grid-area: 190 / 71 / 195 / 97;
    -webkit-animation-delay: 4.4s;
    animation-delay: 4.4s;
}
.grid > div:nth-of-type(69) {
    grid-area: 198 / 83 / 251 / 89;
    -webkit-animation-delay: 4.45s;
    animation-delay: 4.45s;
}
.grid > div:nth-of-type(70) {
    grid-area: 198 / 76 / 251 / 81;
    -webkit-animation-delay: 4.5s;
    animation-delay: 4.5s;
}
.grid > div:nth-of-type(71) {
    grid-area: 198 / 73 / 251 / 75;
    -webkit-animation-delay: 4.55s;
    animation-delay: 4.55s;
}
.grid > div:nth-of-type(72) {
    grid-area: 198 / 66 / 251 / 70;
    -webkit-animation-delay: 4.6s;
    animation-delay: 4.6s;
}
.grid > div:nth-of-type(73) {
    grid-area: 198 / 60 / 223 / 64;
    -webkit-animation-delay: 4.65s;
    animation-delay: 4.65s;
}
.grid > div:nth-of-type(74) {
    grid-area: 198 / 54 / 223 / 58;
    -webkit-animation-delay: 4.7s;
    animation-delay: 4.7s;
}
.grid > div:nth-of-type(75) {
    grid-area: 198 / 49 / 223 / 53;
    -webkit-animation-delay: 4.75s;
    animation-delay: 4.75s;
}
.grid > div:nth-of-type(76) {
    grid-area: 198 / 32 / 223 / 36;
    -webkit-animation-delay: 4.8s;
    animation-delay: 4.8s;
}
.grid > div:nth-of-type(77) {
    grid-area: 193 / 115 / 206 / 127;
    -webkit-animation-delay: 4.85s;
    animation-delay: 4.85s;
}
header {
    border-bottom: 1px solid silver;
    text-align: center;
}
footer {
    border-top: 1px solid silver;
}
footer,
header {
    display: block;
    margin: 40px auto;
    max-width: 640px;
}
h1,
p,
a {
    font-family: sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    color: #666;
    text-decoration: none;
}
a {
    font-weight: 700;
    border-bottom: 1px dashed silver;
}
img {
    width: 10vmin;
    float: left;
}
footer p:last-of-type {
    text-align: right;
}
h1 {
    font-family: monospace;
    font-size: 24px;
    line-height: 1.4;
    font-weight: 400;
    margin: 20px 0;
    text-align: center;
    border-bottom: 1px solid silver;
}
p {
    font-size: 11px;
    line-height: 1.7;
}
a[href*=chrome],
a[href*="//www.mozilla"] {
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
}
p strong {
    color: #b90000;
}
h1 strong {
    font-weight: 400;
}

HTML

<header>
    <h1>CSS Grid Poster</h1>
    <p><a href="//caniuse.com/#feat=css-grid" target="_blank" title="CSS Grid Layout Module Level 1">CSS Grids</a> are comming</p>
</header>


<div class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<footer>
    <p>If you <strong>don't see anything</strong> – please enable:
        <br> <a href="chrome://flags/#enable-experimental-web-platform-features" target="_blank">chrome://flags/#enable-experimental-web-platform-features</a>
        <br>or maybe try <a href="//www.mozilla.org/en-US/firefox/developer/">Firefox for developers (v.46)</a>
    </p>
    <p>Poster design by <a href="//www.connect.ecuad.ca/people/work/249835" target="_blank">Yumi Simonson</a>
    </p>
</footer>

CSS Grid Poster 从本例可以看到使用网格布局可以构造非常强大和灵活的布局。

CSS3

编辑器支持Emmet

快捷键

CSS Grid Poster 从本例可以看到使用网格布局可以构造非常强大和灵活的布局。

CSS3

使用CSS3背景裁剪（background-clip）特性实现的文本标题透视特效

6个使用CSS3 transform-origin属性实现的方形翻转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：