css-6 df15,CSS3 六边形渐变色背景

CSS

语言：

CSSSCSS

确定

html,

body {

width: 200%;

height: 100%;

margin: 0;

padding: 0;

background: #000;

overflow: hidden;

}

.hex:before {

content: '';

width: 0;

height: 0;

border-bottom: 30px solid #0df2df;

border-left: 52px solid transparent;

border-right: 52px solid transparent;

position: absolute;

top: -30px;

animation: hexagon2 30s linear infinite;

}

.hex {

margin-top: 30px;

width: 104px;

height: 60px;

background-color: #0df2df;

position: relative;

float: left;

margin-left: 6px;

margin-bottom: -24px;

animation: hexagon 30s linear infinite;

}

.hex:after {

content: '';

width: 0;

position: absolute;

bottom: -30px;

border-top: 30px solid #0df2df;

border-left: 52px solid transparent;

border-right: 52px solid transparent;

animation: hexagon3 30s linear infinite;

}

.hex-row:first-child {

clear: left;

margin-top: -80px;

margin-left: -53px;

}

.hex-row:nth-child(even) {

padding-top: 30px;

margin-left: -106px;

clear: left;

}

.hex-row:nth-child(odd) {

padding-top: 30px;

margin-left: -53px;

clear: left;

}

@keyframes hexagon {

0%, 100% {

background-color: #f3f;

transform: rotate(0deg) scale(1);

}

25%,

75% {

background-color: rgba(153, 255, 204, .2);

transform: rotate(180deg) scale(2);

}

50% {

background-color: rgba(255, 54, 51, .5);

transform: rotate(360deg) scale(1.5);

}

}

@keyframes hexagon2 {

0%, 100% {

border-bottom-color: #f3f;

}

25%,

75% {

border-bottom-color: rgba(153, 255, 204, .2);

}

50% {

border-bottom-color: rgba(255, 54, 51, .5);

}

}

@keyframes hexagon3 {

0%, 100% {

border-top-color: #f3f;

}

25%,

75% {

border-top-color: rgba(153, 255, 204, .2);

}

50% {

border-top-color: rgba(255, 54, 51, .5);

}

}