css3 背景色渐变动画,CSS3 简单的全屏背景色渐变动画

CSS

语言：

CSSSCSS

确定

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

body {

margin: 0;

font-family: 'Bitter', serif;

text-align: center;

}

.holder,

.first,

.second,

.third {

height: 100vh;

width: 100vw;

}

.first,

.second,

.third {

position: absolute;

}

.second,

.third {

opacity: 0;

}

.holder {

height: 100vh;

position: relative;

z-index: 1;

}

.first {

animation: first 10s infinite;

background: linear-gradient(#5ff8ca, #60e08c);

z-index: 10;

}

@keyframes first {

0% {

opacity: 1.0;

}

10% {

opacity: 0.8;

}

20% {

opacity: 0.6;

}

30% {

opacity: 0.4;

}

40% {

opacity: 0.2;

}

50% {

opacity: 0.1;

}

60% {

opacity: 0.2;

}

70% {

opacity: 0.4;

}

80% {

opacity: 0.6;

}

90% {

opacity: 0.8;

}

100% {

opacity: 1.0;

}

}

.second {

animation: second 10s infinite;

animation-delay: 2s;

background: linear-gradient(#19eaa6, #00a1f0);

z-index: 20;

}

@keyframes second {

0% {

opacity: 0;

}

10% {

opacity: 0.2;

}

20% {

opacity: 0.4;

}

30% {

opacity: 0.6;

}

40% {

opacity: 0.8;

}

50% {

opacity: 1.0;

}

60% {

opacity: 0.8;

}

70% {

opacity: 0.6;

}

80% {

opacity: 0.4;

}

90% {

opacity: 0.2;

}

100% {

opacity: 0;

}

}

.third {

animation: third 10s infinite;

animation-delay: 8s;

background: linear-gradient(#aab7f8, #ff75c6);

z-index: 30;

}

@keyframes third {

0% {

opacity: 0;

}

10% {

opacity: 0.2;

}

20% {

opacity: 0.4;

}

30% {

opacity: 0.6;

}

40% {

opacity: 0.8;

}

50% {

opacity: 1.0;

}

60% {

opacity: 0.8;

}

70% {

opacity: 0.6;

}

80% {

opacity: 0.4;

}

90% {

opacity: 0.2;

}

100% {

opacity: 0;

}

}

.txt {

margin-top: calc(50vh - 43px);

position: absolute;

width: 100%;

z-index: 1000;

}

h1 {

font-size: 40px;

font-weight: 400;

margin: 0;

}

p {

font-size: 20px;

margin-top: 26px;

}