html5 选择格子,HTML5 方格创意布局+饼状菜单

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Oxygen);

@import url(http://weloveiconfonts.com/api/?family=entypo);

body {

margin: 0;

}

.wrapper {

position: relative;

height: 100%;

width: 100%;

}

p {

line-height: 1.33em;

color: #7e7e7e;

font-family: 'Lemon', cursive;

}

h1 {

color: #eee;

}

#content {

margin: 0 auto;

padding-bottom: 50px;

}

#loader-wrapper {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1000;

}

#loader {

display: block;

position: relative;

left: 50%;

top: 50%;

width: 150px;

height: 150px;

margin: -75px 0 0 -75px;

border-radius: 50%;

z-index: 1001;

-webkit-animation: spin 2s linear infinite;

animation: spin 2s linear infinite;

}

#loader:before {

content: "";

position: absolute;

top: 5px;

left: 5px;

right: 5px;

bottom: 5px;

border-radius: 50%;

-webkit-animation: spin 3s linear infinite;

animation: spin 3s linear infinite;

}

#loader:after {

content: "";

position: absolute;

top: 15px;

right: 15px;

left: 15px;

bottom: 15px;

border-radius: 50%;

}

#loader-wrapper .loader-section {

position: fixed;

top: 0;

width: 51%;

height: 100%;

background-color: lightgray;

background-size: cover;

background-repeat: no-repeat;

background-position: center;

background-blend-mode: multiply;

z-index: 1000;

-webkit-transform: translateX(0);

-ms-transform: translateX(0);

transform: translateX(0);

}

#loader-wrapper .loader-section.section-left {

left: 0;

}

#loader-wrapper .loader-section.section-right {

right: 0;

}

#loader {

display: block;

width: 100px;

height: 100px;

margin: 50 auto;

}

.circ-one {

position: relative;

display: block;

width: 50px;

height: 50px;

background: #d95b43;

border-radius: 100%;

float: left;

-webkit-animation: load-x 1s cubic-bezier(0.445, 0.1, 0.55, 0.9) infinite;

animation: load-x 1s cubic-bezier(0.445, 0.1, 0.55, 0.9) infinite;

}

.circ-two {

position: relative;

display: block;

width: 50px;

height: 50px;

background: #542437;

border-radius: 100%;

float: right;

-webkit-animation: load-y 1s cubic-bezier(0.445, 0.1, 0.55, 0.9) infinite;

animation: load-y 1s cubic-bezier(0.445, 0.1, 0.55, 0.9) infinite;

}

@-webkit-keyframes load-x {

0% {

left: -10px;

-webkit-transform: scale(1);

transform: scale(1);

}

25% {

-webkit-transform: scale(1.5);

transform: scale(1.5);

z-index: 2;

}

50% {

left: 60px;

-webkit-transform: scale(1);

transform: scale(1);

}

75% {

-webkit-transform: scale(0.5);

transform: scale(0.5);

z-index: 1;

}

100% {

left: -10px;

-webkit-transform: scale(1);

transform: scale(1);

}

}

@keyframes load-x {

0% {

left: -10px;

-webkit-transform: scale(1);

transform: scale(1);

}

25% {

-webkit-transform: scale(1.5);

transform: scale(1.5);

z-index: 2;

}

50% {

left: 60px;

-webkit-transform: scale(1);

transform: scale(1);

}

75% {

-webkit-transform: scale(0.5);

transform: scale(0.5);

z-index: 1;

}

100% {

left: -10px;

-webkit-transform: scale(1);

transform: scale(1);

}

}

@-webkit-keyframes load-y {

0% {

right: -10px;

-webkit-transform: scale(1);

transform: scale(1);

}

25% {

-webkit-transform: scale(0.5);

transform: scale(0.5);

}

50% {

right: 60px;

-webkit-transform: scale(1);

transform: scale(1);

z-index: 1;

}

75% {

-webkit-transform: scale(1.5);

transform: scale(1.5);

z-index: 2;

}

100% {

right: -10px;

-webkit-transform: scale(1);

transform: scale(1);

}

}

@keyframes load-y {

0% {

right: -10px;

-webkit-transform: scale(1);

transform: scale(1);

}

25% {

-webkit-transform: scale(0.5);

transform: scale(0.5);

}

50% {

right: 60px;

-webkit-transform: scale(1);

transform: scale(1);

z-index: 1;

}

75% {

-webkit-transform: scale(1.5);

transform: scale(1.5);

z-index: 2;

}

100% {

right: -10px;

-webkit-transform: scale(1);

transform: scale(1);

}

}

#loader p {

text-align: center;

font-family: 'Hanna', serif;

font-weight: 50;

color: #c02942;

-webkit-animation: pulse 2s ease-in-out infinite;

animation: pulse 2s ease-in-out infinite;

}

@-webkit-keyframes pulse {

50% {

opacity: 0.5;

}

}

@keyframes pulse {

50% {

opacity: 0.5;

}

}

.loaded #loader-wrapper .loader-section.section-left {

-webkit-transform: translateY(-100%);

-ms-transform: translateY(-100%);

transform: translateY(-100%);

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

}

.loaded #loader-wrapper .loader-section.section-right {

-webkit-transform: translateY(100%);

-ms-transform: translateY(100%);

transform: translateY(100%);

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

}

.loaded #loader {

opacity: 0;

-webkit-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

}

.loaded #loader-wrapper {

visibility: hidden;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

-webkit-transition: all 0.3s 1s ease-out;

transition: all 0.3s 1s ease-out;

}

[class*="entypo-"]:before {

font-family: 'entypo', sans-serif;

}

* {

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.preload * {

-webkit-transition: none !important;

transition: none !important;

}

html {

position: relative;

min-height: 100%;

}

.wrapper {

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

}

.grid-unit {

position: relative;

float: left;

border-top: 10px solid #fff;

border-left: 10px solid #fff;

width: 50%;

height: 50%;

-webkit-perspective: 800;

perspective: 800;

overflow: hidden;

}

.top-left {

background: #ecd078;

}

.top-left:hover {

background-image: url("http://zvczvc.zz.vc/img/%ED%95%98%EB%B2%84%20%EB%B8%8C%EB%A6%BF%EC%A7%80.jpg");

background-size: cover;

border-right: 10px solid #fff;

background-blend-mode: multiply;

background-color: #ecd078;

}

.top-right {

background: #d95b43;

border-right: 10px solid #fff;

}

.top-right:hover {

background-image: url("http://content.finda.photo/unsplash/oFAVqfTSby8.jpg");

background-size: cover;

border-right: 10px solid #fff;

background-blend-mode: multiply;

background-color: #d95b43;

}

.bottom-right {

background: #c02942;

border-bottom: 10px solid #fff;

border-right: 10px solid #fff;

}

.bottom-right:hover {

background-image: url("http://zvczvc.zz.vc/img/%EB%A9%94%ED%8A%B8%EB%A1%9C%ED%8F%B4%EB%A6%AC%ED%83%84%20%EB%AF%B8%EC%88%A0%EA%B4%80.jpg");

background-size: cover;

border-right: 10px solid #fff;

background-blend-mode: multiply;

background-color: #c02942;

}

.bottom-left {

background: #542437;

border-bottom: 10px solid #fff;

}

.bottom-left:hover {

background-image: url("http://zvczvc.zz.vc/img/5%20hartensteinabroad%20pont%20neuf%20bridge%20paris.JPG");

background-size: cover;

background-blend-mode: multiply;

background-color: #542437;

}

.swing-panel {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

font-size: 2.5em;

color: #fff;

font-family: Oxygen, arial, sans-serif;

-webkit-transform-origin: left 50%;

-ms-transform-origin: left 50%;

transform-origin: left 50%;

-webkit-transform: rotateY(120deg);

transform: rotateY(120deg);

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

transition: transform 0.5s ease;

letter-spacing: -0.05em;

text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

}

.top-right .swing-panel,

.bottom-right .swing-panel {

-webkit-transform-origin: right 50%;

-ms-transform-origin: right 50%;

transform-origin: right 50%;

-webkit-transform: rotateY(-120deg);

transform: rotateY(-120deg);

}

.desc {

display: block;

position: absolute;

padding: 5%;

}

.label {

position: absolute;

font-family: Oxygen, arial, sans-serif;

color: #fff;

font-size: 1.2em;

opacity: 1;

-webkit-transition: opacity 0.5s ease;

transition: opacity 0.5s ease;

}

.grid-unit:hover .label {

opacity: 0;

}

.top-left .label {

bottom: 100px;

right: 80px;

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

}

.top-right .label {

bottom: 100px;

left: 80px;

-webkit-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.bottom-left .label {

top: 100px;

right: 80px;

-webkit-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.bottom-right .label {

top: 100px;

left: 80px;

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

}

.top-left .desc {

top: 0;

left: 0;

}

.top-right .desc {

top: 0;

right: 0;

}

.bottom-left .desc {

bottom: 0;

left: 0;

}

.bottom-right .desc {

bottom: 0;

right: 0;

}

.grid-unit:hover .swing-panel {

-webkit-transform: rotateY(0deg);

transform: rotateY(0deg);

}

.sphere {

position: absolute;

width: 200px;

height: 200px;

background-color: white;

border-radius: 500px;

-webkit-transition: background-color 0.25s ease;

transition: background-color 0.25s ease;

opacity: 1;

}

.top-left .sphere {

right: -100px;

bottom: -100px;

}

.top-right .sphere {

left: -100px;

bottom: -100px;

}

.bottom-right .sphere {

left: -100px;

top: -100px;

}

.bottom-left .sphere {

right: -100px;

top: -100px;

}

.grid-unit:hover .sphere {

background-color: rgba(255, 255, 255, 0);

}

.icon {

position: absolute;

font-size: 2em;

-webkit-transition: all 0.25s ease;

transition: all 0.25s ease;

z-index: 5;

}

.bottom-left .icon {

top: 20px;

right: 30px;

color: #542437;

}

.bottom-right .icon {

top: 20px;

left: 22px;

color: #c02942;

}

.top-right .icon {

bottom: 25px;

left: 20px;

color: #d95b43;

}

.top-left .icon {

bottom: 25px;

right: 35px;

color: #ecd078;

}

.grid-unit:hover .icon {

color: #fff;

font-size: 8em;

}