CSS
语言:
CSSSCSS
确定
.flex-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.flex-row > * {
-webkit-box-flex: 0;
-webkit-flex: 0 0 14.28571%;
-ms-flex: 0 0 14.28571%;
flex: 0 0 14.28571%;
overflow: hidden;
}
.flex-row.grid::after {
content: '';
-webkit-box-flex: 1;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
}
.flex-row.grid::before {
content: '';
-webkit-box-flex: 0;
-webkit-flex: 0 0 57.14286%;
-ms-flex: 0 0 57.14286%;
flex: 0 0 57.14286%;
}
body {
background: #8c9eff;
color: #fff;
padding: 2em;
font-family: Helvetica, Arial, sans-serif;
font-size: 3.5vmin;
font-weight: 200;
}
header {
text-transform: uppercase;
font-size: 1.5em;
padding: .5em;
background: #98a8ff;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
height: 100%;
}
.grid-header {
background: #98a8ff;
}
.grid-header > * {
text-align: center;
text-transform: uppercase;
font-size: .8em;
}
.grid::before,
.grid::after {
background: #98a8ff;
}
header,
.grid-header {
box-shadow: 0 0 0 1px, 0 0 0 1px inset;
}
.grid {
box-shadow: 0 0 0 1px;
}
.grid > *,
.grid::before,
.grid::after {
box-shadow: 0 0 0 1px inset;
}
.grid-header > *,
.grid > * {
padding: .5em;
}
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row;
-ms-flex-flow: row;
flex-flow: row;
}
main {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
}
.grid-header {
-webkit-box-flex: 0;
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
.grid {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.grid > *:hover {
-webkit-transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.7, 1.5);
transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.7, 1.5);
transition: transform 0.35s cubic-bezier(0, 0, 0.7, 1.5);
transition: transform 0.35s cubic-bezier(0, 0, 0.7, 1.5), -webkit-transform 0.35s cubic-bezier(0, 0, 0.7, 1.5);
background: #feec9b;
color: #8c9eff;
border-radius: .2em;
-webkit-transform: scale(1.1);
transform: scale(1.1);
z-index: 1;
box-shadow: 0 0 0 1px #fff inset, 0 0.3em 1.3em -0.5em #000;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
}