html文字背景墙,CSS3 方格变换连接而成的背景墙

CSS

语言：

CSSSCSS

确定

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: white; }

figure {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

width: 80vmin;

height: 80vmin; }

div {

-webkit-box-flex: 1;

-webkit-flex: 1 0 20%;

-ms-flex: 1 0 20%;

flex: 1 0 20%;

-webkit-animation: spin 1.5s linear infinite;

animation: spin 1.5s linear infinite;

background: dodgerblue; }

div:nth-child(odd) {

-webkit-animation-direction: reverse;

animation-direction: reverse; }

@-webkit-keyframes spin {

from {

-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

25% {

background: #197ad8; }

50% {

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

75% {

background: #3fa0ff; }

to {

-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0); } }

@keyframes spin {

from {

-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

25% {

background: #197ad8; }

50% {

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

75% {

background: #3fa0ff; }

to {

-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0); } }