使用Splitting.js轻松实现砖块排列布局

splitting.js card layout

h5, template, tile, layout

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #ededec;
    font-family: 'Futura';
}
body #outer {
    min-width: 600px;
    height: 375px;
    position: absolute;
    box-shadow: 0 0 0 10px #ededec, inset 0 0 0 5px #ededec;
}
body #outer.active:before,
body #outer.active:after {
    -webkit-transform: scale(1);
    transform: scale(1);
    transition-delay: 800ms;
}
body #outer.active:after {
    transition-delay: 1000ms;
}
body #outer:before {
    content: '';
    position: absolute;
    width: 50px;
    height: 100px;
    bottom: -14px;
    left: -14px;
    background: #1A1612;
    z-index: -1;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    transition: -webkit-transform 600ms cubic-bezier(1, 0, 0, 1);
    transition: transform 600ms cubic-bezier(1, 0, 0, 1);
    transition: transform 600ms cubic-bezier(1, 0, 0, 1), -webkit-transform 600ms cubic-bezier(1, 0, 0, 1);
    -webkit-transform: scale(0);
    transform: scale(0);
}
body #outer:after {
    content: '';
    position: absolute;
    width: 100px;
    height: 75px;
    top: -14px;
    right: -14px;
    background: #1A1612;
    z-index: -1;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    transition: -webkit-transform 400ms cubic-bezier(1, 0, 0, 1);
    transition: transform 400ms cubic-bezier(1, 0, 0, 1);
    transition: transform 400ms cubic-bezier(1, 0, 0, 1), -webkit-transform 400ms cubic-bezier(1, 0, 0, 1);
    -webkit-transform: scale(0);
    transform: scale(0);
}
body #wrap {
    min-width: 600px;
    height: 375px;
    position: relative;
    display: inline-block;
    -webkit-clip-path: polygon(0 -150%, 100% -150%, 100% 100%, 0% 100%);
    clip-path: polygon(0 -150%, 100% -150%, 100% 100%, 0% 100%);
    background: #fff;
}
body #wrap h1 {
    position: absolute;
    margin: 0;
    top: 55%;
    right: 0;
    width: 100%;
    text-align: center;
    color: #1A1612;
    pointer-events: none;
    font-family: 'Libre Baskerville', serif;
    font-weight: 900;
    z-index: 0;
}
body #wrap h1 span.word {
    display: inline-block;
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
    transition: -webkit-transform 600ms cubic-bezier(1, 0, 0, 1);
    transition: transform 600ms cubic-bezier(1, 0, 0, 1);
    transition: transform 600ms cubic-bezier(1, 0, 0, 1), -webkit-transform 600ms cubic-bezier(1, 0, 0, 1);
    transition-delay: 0s;
}
body #wrap p {
    position: absolute;
    bottom: 10px;
    width: calc(50% - 25px);
    right: 12.5px;
    color: #1A1612;
    font-size: 18px;
    line-height: 24px;
}
body #wrap p span.word {
    display: inline-block;
    -webkit-transform: translateY(200px) rotate(45deg);
    transform: translateY(200px) rotate(45deg);
    transition: -webkit-transform 600ms cubic-bezier(1, 0, 0, 1);
    transition: transform 600ms cubic-bezier(1, 0, 0, 1);
    transition: transform 600ms cubic-bezier(1, 0, 0, 1), -webkit-transform 600ms cubic-bezier(1, 0, 0, 1);
    transition-delay: 0s;
}
body #wrap .tile {
    background: #fff;
    position: absolute;
    height: 105%;
    width: 35%;
    top: -2.5%;
    transition: 400ms cubic-bezier(1, 0, 0, 1);
    transition-delay: 0s, 0s;
    will-change: transform;
    overflow: hidden;
    z-index: 1;
}
body #wrap .tile:hover b:before {
    box-shadow: 0 0 0 9px transparent, 0 0 0 10px #fff;
}
body #wrap .tile b {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 60px;
    margin: 0;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    color: #fff;
    mix-blend-mode: exclusion;
    transition: 0.4s cubic-bezier(1, 0, 0, 1);
}
body #wrap .tile b:after {
    content: 'X';
    position: absolute;
    z-index: 3;
    color: #1A1612;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    transition: 0.4s cubic-bezier(1, 0, 0, 1);
}
body #wrap .tile b:before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    box-shadow: 0 0 0 0px transparent, 0 0 0 1px #fff;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    transition: 0.4s cubic-bezier(1, 0, 0, 1);
}
body #wrap .tile:not(.active):hover:before {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
body #wrap .tile:before,
body #wrap .tile:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url("/uploads/161001/normal1.jpg");
    background-size: cover;
    background-position: center;
    transition: 0.2s ease-in-out;
    will-change: width;
}
body #wrap .tile:before {
    -webkit-filter: saturate(0) contrast(2);
    filter: saturate(0) contrast(2);
    opacity: 0.25;
}
body #wrap .tile:after {
    background: #f8423e;
    mix-blend-mode: darken;
}
body #wrap .tile:nth-of-type(2):before {
    background-image: url("/uploads/161001/normal2.jpg");
}
body #wrap .tile:nth-of-type(3):before {
    background-image: url("/uploads/161001/normal3.jpg");
}
body #wrap .tile:nth-of-type(1) {
    left: -0.495%;
    transition-delay: 0.2333333333s;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}
body #wrap .tile:nth-of-type(1).active ~ h1:nth-of-type(1) {
    z-index: 2;
}
body #wrap .tile:nth-of-type(1).active ~ h1:nth-of-type(1) span.word {
    display: inline-block;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    color: #1A1612;
}
body #wrap .tile:nth-of-type(1).active ~ h1:nth-of-type(1) span.word:nth-of-type(1) {
    transition-delay: 420ms;
}
body #wrap .tile:nth-of-type(1).active ~ h1:nth-of-type(1) span.word:nth-of-type(2) {
    transition-delay: 440ms;
}
body #wrap .tile:nth-of-type(1).active ~ h1:nth-of-type(1) span.word:nth-of-type(3) {
    transition-delay: 460ms;
}
body #wrap .tile:nth-of-type(1).active ~ h1:nth-of-type(1) span.word:nth-of-type(4) {
    transition-delay: 480ms;
}
body #wrap .tile:nth-of-type(1).active ~ h1:nth-of-type(1) span.word:nth-of-type(5) {
    transition-delay: 500ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) {
    z-index: 2;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word {
    display: inline-block;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    color: #1A1612;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(1) {
    transition-delay: 410ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(2) {
    transition-delay: 420ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(3) {
    transition-delay: 430ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(4) {
    transition-delay: 440ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(5) {
    transition-delay: 450ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(6) {
    transition-delay: 460ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(7) {
    transition-delay: 470ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(8) {
    transition-delay: 480ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(9) {
    transition-delay: 490ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(10) {
    transition-delay: 500ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(11) {
    transition-delay: 510ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(12) {
    transition-delay: 520ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(13) {
    transition-delay: 530ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(14) {
    transition-delay: 540ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(15) {
    transition-delay: 550ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(16) {
    transition-delay: 560ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(17) {
    transition-delay: 570ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(18) {
    transition-delay: 580ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(19) {
    transition-delay: 590ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(20) {
    transition-delay: 600ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(21) {
    transition-delay: 610ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(22) {
    transition-delay: 620ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(23) {
    transition-delay: 630ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(24) {
    transition-delay: 640ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(25) {
    transition-delay: 650ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(26) {
    transition-delay: 660ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(27) {
    transition-delay: 670ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(28) {
    transition-delay: 680ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(29) {
    transition-delay: 690ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(30) {
    transition-delay: 700ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(31) {
    transition-delay: 710ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(32) {
    transition-delay: 720ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(33) {
    transition-delay: 730ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(34) {
    transition-delay: 740ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(35) {
    transition-delay: 750ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(36) {
    transition-delay: 760ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(37) {
    transition-delay: 770ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(38) {
    transition-delay: 780ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(39) {
    transition-delay: 790ms;
}
body #wrap .tile:nth-of-type(1).active ~ p:nth-of-type(1) span.word:nth-of-type(40) {
    transition-delay: 800ms;
}
body #wrap .tile:nth-of-type(2) {
    left: 32.505%;
    transition-delay: 0.3166666667s;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}
body #wrap .tile:nth-of-type(2).active ~ h1:nth-of-type(2) {
    z-index: 2;
}
body #wrap .tile:nth-of-type(2).active ~ h1:nth-of-type(2) span.word {
    display: inline-block;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    color: #1A1612;
}
body #wrap .tile:nth-of-type(2).active ~ h1:nth-of-type(2) span.word:nth-of-type(1) {
    transition-delay: 420ms;
}
body #wrap .tile:nth-of-type(2).active ~ h1:nth-of-type(2) span.word:nth-of-type(2) {
    transition-delay: 440ms;
}
body #wrap .tile:nth-of-type(2).active ~ h1:nth-of-type(2) span.word:nth-of-type(3) {
    transition-delay: 460ms;
}
body #wrap .tile:nth-of-type(2).active ~ h1:nth-of-type(2) span.word:nth-of-type(4) {
    transition-delay: 480ms;
}
body #wrap .tile:nth-of-type(2).active ~ h1:nth-of-type(2) span.word:nth-of-type(5) {
    transition-delay: 500ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) {
    z-index: 2;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word {
    display: inline-block;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    color: #1A1612;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(1) {
    transition-delay: 410ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(2) {
    transition-delay: 420ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(3) {
    transition-delay: 430ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(4) {
    transition-delay: 440ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(5) {
    transition-delay: 450ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(6) {
    transition-delay: 460ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(7) {
    transition-delay: 470ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(8) {
    transition-delay: 480ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(9) {
    transition-delay: 490ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(10) {
    transition-delay: 500ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(11) {
    transition-delay: 510ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(12) {
    transition-delay: 520ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(13) {
    transition-delay: 530ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(14) {
    transition-delay: 540ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(15) {
    transition-delay: 550ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(16) {
    transition-delay: 560ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(17) {
    transition-delay: 570ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(18) {
    transition-delay: 580ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(19) {
    transition-delay: 590ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(20) {
    transition-delay: 600ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(21) {
    transition-delay: 610ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(22) {
    transition-delay: 620ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(23) {
    transition-delay: 630ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(24) {
    transition-delay: 640ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(25) {
    transition-delay: 650ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(26) {
    transition-delay: 660ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(27) {
    transition-delay: 670ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(28) {
    transition-delay: 680ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(29) {
    transition-delay: 690ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(30) {
    transition-delay: 700ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(31) {
    transition-delay: 710ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(32) {
    transition-delay: 720ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(33) {
    transition-delay: 730ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(34) {
    transition-delay: 740ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(35) {
    transition-delay: 750ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(36) {
    transition-delay: 760ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(37) {
    transition-delay: 770ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(38) {
    transition-delay: 780ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(39) {
    transition-delay: 790ms;
}
body #wrap .tile:nth-of-type(2).active ~ p:nth-of-type(2) span.word:nth-of-type(40) {
    transition-delay: 800ms;
}
body #wrap .tile:nth-of-type(3) {
    left: 65.505%;
    transition-delay: 0.4s;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}
body #wrap .tile:nth-of-type(3).active ~ h1:nth-of-type(3) {
    z-index: 2;
}
body #wrap .tile:nth-of-type(3).active ~ h1:nth-of-type(3) span.word {
    display: inline-block;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    color: #1A1612;
}
body #wrap .tile:nth-of-type(3).active ~ h1:nth-of-type(3) span.word:nth-of-type(1) {
    transition-delay: 420ms;
}
body #wrap .tile:nth-of-type(3).active ~ h1:nth-of-type(3) span.word:nth-of-type(2) {
    transition-delay: 440ms;
}
body #wrap .tile:nth-of-type(3).active ~ h1:nth-of-type(3) span.word:nth-of-type(3) {
    transition-delay: 460ms;
}
body #wrap .tile:nth-of-type(3).active ~ h1:nth-of-type(3) span.word:nth-of-type(4) {
    transition-delay: 480ms;
}
body #wrap .tile:nth-of-type(3).active ~ h1:nth-of-type(3) span.word:nth-of-type(5) {
    transition-delay: 500ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) {
    z-index: 2;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word {
    display: inline-block;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    color: #1A1612;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(1) {
    transition-delay: 410ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(2) {
    transition-delay: 420ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(3) {
    transition-delay: 430ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(4) {
    transition-delay: 440ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(5) {
    transition-delay: 450ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(6) {
    transition-delay: 460ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(7) {
    transition-delay: 470ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(8) {
    transition-delay: 480ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(9) {
    transition-delay: 490ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(10) {
    transition-delay: 500ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(11) {
    transition-delay: 510ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(12) {
    transition-delay: 520ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(13) {
    transition-delay: 530ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(14) {
    transition-delay: 540ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(15) {
    transition-delay: 550ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(16) {
    transition-delay: 560ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(17) {
    transition-delay: 570ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(18) {
    transition-delay: 580ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(19) {
    transition-delay: 590ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(20) {
    transition-delay: 600ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(21) {
    transition-delay: 610ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(22) {
    transition-delay: 620ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(23) {
    transition-delay: 630ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(24) {
    transition-delay: 640ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(25) {
    transition-delay: 650ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(26) {
    transition-delay: 660ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(27) {
    transition-delay: 670ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(28) {
    transition-delay: 680ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(29) {
    transition-delay: 690ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(30) {
    transition-delay: 700ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(31) {
    transition-delay: 710ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(32) {
    transition-delay: 720ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(33) {
    transition-delay: 730ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(34) {
    transition-delay: 740ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(35) {
    transition-delay: 750ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(36) {
    transition-delay: 760ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(37) {
    transition-delay: 770ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(38) {
    transition-delay: 780ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(39) {
    transition-delay: 790ms;
}
body #wrap .tile:nth-of-type(3).active ~ p:nth-of-type(3) span.word:nth-of-type(40) {
    transition-delay: 800ms;
}
body #wrap.active .tile {
    -webkit-transform: translateY(200%);
    transform: translateY(200%);
    opacity: 0;
}
body #wrap.active .tile.active {
    width: 75%;
    height: 75%;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.15);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: -25%;
    left: 50%;
    grid-column-start: 2;
    opacity: 1;
}
body #wrap.active .tile.active b {
    opacity: 1;
    color: transparent;
    mix-blend-mode: hard-light;
    -webkit-transform: translateX(0) translateY(0) scale(0.35);
    transform: translateX(0) translateY(0) scale(0.35);
    left: 5px;
    top: -10px;
    z-index: 3;
}
body #wrap.active .tile.active b:hover:before {
    box-shadow: inset 0 0 0 50px #1A1612, 0 0 0 10px #fff;
    transition-delay: 0s;
}
body #wrap.active .tile.active b:hover:after {
    color: #fff;
    transition-delay: 0s;
}
body #wrap.active .tile.active b:after {
    opacity: 1;
}
body #wrap.active .tile.active b:before {
    box-shadow: inset 0 0 0 50px #0abbbb, 0 0 0 10px #1A1612;
}
body #wrap.active .tile.active:before {
    -webkit-filter: saturate(1) contrast(1);
    filter: saturate(1) contrast(1);
    opacity: 1;
}
body #wrap.active .tile.active:after {
    opacity: 0;
}
body #wrap.active:before {
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}
body #wrap:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #f8423e;
    transition: all 600ms cubic-bezier(1, 0, 0, 1);
    -webkit-transform-origin: left;
    transform-origin: left;
    z-index: 1;
}

HTML

splitting.js card layout

h5, template, tile, layout

编辑器支持Emmet

快捷键

splitting.js card layout

h5, template, tile, layout

使用Splitting.js实现的标题字符串切分组合动画

使用CSS3 clip-path实现的页面布局文本特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：