CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic);

html,

body {

height: 100%;

}

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

background: lightgray;

}

figure {

position: relative;

width: 330px;

height: 330px;

background: white;

box-shadow: 0 10px 40px gray;

background-position: 0 0;

background-color: white;

background-image: -webkit-repeating-linear-gradient(transparent 0, transparent 9px, gainsboro 10px), -webkit-repeating-linear-gradient(0deg, transparent 0, transparent 9px, gainsboro 10px);

background-image: repeating-linear-gradient(transparent 0, transparent 9px, gainsboro 10px), repeating-linear-gradient(90deg, transparent 0, transparent 9px, gainsboro 10px);

}

div {

display: block;

position: absolute;

width: 110px;

height: 220px;

box-sizing: border-box;

-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.45, 0.15, 0, 1);

transition: transform 0.5s cubic-bezier(0.45, 0.15, 0, 1);

}

.top.left,

.bottom.right {

width: 110px;

height: 220px;

border-bottom: 220px solid;

border-left: 110px solid;

}

.top.right,

.bottom.left {

width: 220px;

height: 110px;

border-right: 220px solid;

border-bottom: 110px solid;

}

.top {

top: 0;

}

.left {

left: 0;

}

.right {

right: 0;

}

.bottom {

bottom: 0;

}

.top.left {

border-color: transparent limegreen;

}

.top.right {

border-color: transparent tomato;

}

.bottom.left {

border-color: dodgerblue transparent;

}

.bottom.right {

border-color: gold transparent;

-webkit-transition-delay: 0.5s;

transition-delay: 0.5s;

}

label {

font-family: Playfair Display;

font-style: italic;

font-size: 32px;

position: absolute;

text-align: center;

-webkit-transition: -webkit-transform 0.5s;

transition: transform 0.5s;

}

label:before {

content: attr(class);

}

label:after {

display: inline-block;

content: "2";

font-size: smaller;

line-height: 1;

vertical-align: super;

}

.a {

width: 330px;

line-height: 330px;

}

.b {

top: 0;

right: 0;

width: 220px;

height: 220px;

line-height: 220px;

-webkit-transform: translate(55px, -55px);

-ms-transform: translate(55px, -55px);

transform: translate(55px, -55px);

}

.c {

bottom: 0;

left: 0;

width: 110px;

height: 110px;

line-height: 110px;

}

.closed .top.right {

-webkit-transform: translate(0, 200%);

-ms-transform: translate(0, 200%);

transform: translate(0, 200%);

-webkit-transition-delay: 0.5s;

transition-delay: 0.5s;

}

.closed .bottom.right {

-webkit-transform: translate(-200%, -50%);

-ms-transform: translate(-200%, -50%);

transform: translate(-200%, -50%);

-webkit-transition-delay: 0s;

transition-delay: 0s;

}

.closed .bottom.left {

-webkit-transform: translate(50%, 0);

-ms-transform: translate(50%, 0);

transform: translate(50%, 0);

-webkit-transition-delay: 0.5s;

transition-delay: 0.5s;

}

.closed .a {

-webkit-transform: translate(-110px, 0);

-ms-transform: translate(-110px, 0);

transform: translate(-110px, 0);

}

.closed .b {

-webkit-transform: translate(0, 0);

-ms-transform: translate(0, 0);

transform: translate(0, 0);

}