css魔幻布局是什么意思,CSS3 魔幻渐变特效

CSS

语言：

CSSSCSS

确定

body {

padding: 0;

margin: 0; }

.line {

height: 0.4em;

background: -webkit-repeating-linear-gradient(0deg, #105b63 0%, #105b63 20%, red 20%, red 40%, black 40%, black 60%, yellow 60%, yellow 80%, green 80%, green 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, #105b63 0%, #105b63 20%, red 20%, red 40%, black 40%, black 60%, yellow 60%, yellow 80%, green 80%, green 100%) 0 0/400px 0.4em repeat-x;

-webkit-animation-name: moveLines;

animation-name: moveLines;

-moz-animation-name: moveLines;

-webkit-animation-duration: 4s;

animation-duration: 4s;

-moz-animation-duration: 4s;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-moz-animation-direction: alternate;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite; }

@-webkit-keyframes moveLines {

0% {

background: -webkit-repeating-linear-gradient(0deg, #105b63 0%, #105b63 20%, red 20%, red 40%, black 40%, black 60%, yellow 60%, yellow 80%, green 80%, green 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, #105b63 0%, #105b63 20%, red 20%, red 40%, black 40%, black 60%, yellow 60%, yellow 80%, green 80%, green 100%) 0 0/400px 0.4em repeat-x; }

20% {

background: -webkit-repeating-linear-gradient(0deg, green 0%, #105b63 20%, #105b63 20%, red 40%, red 40%, black 60%, black 60%, yellow 80%, yellow 80%, green 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, green 0%, #105b63 20%, #105b63 20%, red 40%, red 40%, black 60%, black 60%, yellow 80%, yellow 80%, green 100%) 0 0/400px 0.4em repeat-x; }

40% {

background: -webkit-repeating-linear-gradient(0deg, green 0%, green 20%, #105b63 20%, #105b63 40%, red 40%, red 60%, black 60%, black 80%, yellow 80%, yellow 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, green 0%, green 20%, #105b63 20%, #105b63 40%, red 40%, red 60%, black 60%, black 80%, yellow 80%, yellow 100%) 0 0/400px 0.4em repeat-x; }

60% {

background: -webkit-repeating-linear-gradient(0deg, yellow 0%, green 20%, green 20%, #105b63 40%, #105b63 40%, red 60%, red 60%, black 80%, black 80%, yellow 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, yellow 0%, green 20%, green 20%, #105b63 40%, #105b63 40%, red 60%, red 60%, black 80%, black 80%, yellow 100%) 0 0/400px 0.4em repeat-x; }

80% {

background: -webkit-repeating-linear-gradient(0deg, yellow 0%, yellow 20%, green 20%, green 40%, #105b63 40%, #105b63 60%, red 60%, red 80%, black 80%, black 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, yellow 0%, yellow 20%, green 20%, green 40%, #105b63 40%, #105b63 60%, red 60%, red 80%, black 80%, black 100%) 0 0/400px 0.4em repeat-x; }

100% {

background: -webkit-repeating-linear-gradient(0deg, black 0%, yellow 20%, yellow 20%, green 40%, green 40%, #105b63 60%, #105b63 60%, red 80%, red 80%, black 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, black 0%, yellow 20%, yellow 20%, green 40%, green 40%, #105b63 60%, #105b63 60%, red 80%, red 80%, black 100%) 0 0/400px 0.4em repeat-x; }

120% {

background: -webkit-repeating-linear-gradient(0deg, black 0%, black 20%, yellow 20%, yellow 40%, green 40%, green 60%, #105b63 60%, #105b63 80%, red 80%, red 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, black 0%, black 20%, yellow 20%, yellow 40%, green 40%, green 60%, #105b63 60%, #105b63 80%, red 80%, red 100%) 0 0/400px 0.4em repeat-x; }

140% {

background: -webkit-repeating-linear-gradient(0deg, red 0%, black 20%, black 20%, yellow 40%, yellow 40%, green 60%, green 60%, #105b63 80%, #105b63 80%, red 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, red 0%, black 20%, black 20%, yellow 40%, yellow 40%, green 60%, green 60%, #105b63 80%, #105b63 80%, red 100%) 0 0/400px 0.4em repeat-x; }

160% {

background: -webkit-repeating-linear-gradient(0deg, red 0%, red 20%, black 20%, black 40%, yellow 40%, yellow 60%, green 60%, green 80%, #105b63 80%, #105b63 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, red 0%, red 20%, black 20%, black 40%, yellow 40%, yellow 60%, green 60%, green 80%, #105b63 80%, #105b63 100%) 0 0/400px 0.4em repeat-x; }

180% {

background: -webkit-repeating-linear-gradient(0deg, #105b63 0%, red 20%, red 20%, black 40%, black 40%, yellow 60%, yellow 60%, green 80%, green 80%, #105b63 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, #105b63 0%, red 20%, red 20%, black 40%, black 40%, yellow 60%, yellow 60%, green 80%, green 80%, #105b63 100%) 0 0/400px 0.4em repeat-x; }

200% {

background: -webkit-repeating-linear-gradient(0deg, #105b63 0%, #105b63 20%, red 20%, red 40%, black 40%, black 60%, yellow 60%, yellow 80%, green 80%, green 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, #105b63 0%, #105b63 20%, red 20%, red 40%, black 40%, black 60%, yellow 60%, yellow 80%, green 80%, green 100%) 0 0/400px 0.4em repeat-x; } }

@keyframes moveLines {

0% {

background: -webkit-repeating-linear-gradient(0deg, #105b63 0%, #105b63 20%, red 20%, red 40%, black 40%, black 60%, yellow 60%, yellow 80%, green 80%, green 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, #105b63 0%, #105b63 20%, red 20%, red 40%, black 40%, black 60%, yellow 60%, yellow 80%, green 80%, green 100%) 0 0/400px 0.4em repeat-x; }

20% {

background: -webkit-repeating-linear-gradient(0deg, green 0%, #105b63 20%, #105b63 20%, red 40%, red 40%, black 60%, black 60%, yellow 80%, yellow 80%, green 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, green 0%, #105b63 20%, #105b63 20%, red 40%, red 40%, black 60%, black 60%, yellow 80%, yellow 80%, green 100%) 0 0/400px 0.4em repeat-x; }

40% {

background: -webkit-repeating-linear-gradient(0deg, green 0%, green 20%, #105b63 20%, #105b63 40%, red 40%, red 60%, black 60%, black 80%, yellow 80%, yellow 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, green 0%, green 20%, #105b63 20%, #105b63 40%, red 40%, red 60%, black 60%, black 80%, yellow 80%, yellow 100%) 0 0/400px 0.4em repeat-x; }

60% {

background: -webkit-repeating-linear-gradient(0deg, yellow 0%, green 20%, green 20%, #105b63 40%, #105b63 40%, red 60%, red 60%, black 80%, black 80%, yellow 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, yellow 0%, green 20%, green 20%, #105b63 40%, #105b63 40%, red 60%, red 60%, black 80%, black 80%, yellow 100%) 0 0/400px 0.4em repeat-x; }

80% {

background: -webkit-repeating-linear-gradient(0deg, yellow 0%, yellow 20%, green 20%, green 40%, #105b63 40%, #105b63 60%, red 60%, red 80%, black 80%, black 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, yellow 0%, yellow 20%, green 20%, green 40%, #105b63 40%, #105b63 60%, red 60%, red 80%, black 80%, black 100%) 0 0/400px 0.4em repeat-x; }

100% {

background: -webkit-repeating-linear-gradient(0deg, black 0%, yellow 20%, yellow 20%, green 40%, green 40%, #105b63 60%, #105b63 60%, red 80%, red 80%, black 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, black 0%, yellow 20%, yellow 20%, green 40%, green 40%, #105b63 60%, #105b63 60%, red 80%, red 80%, black 100%) 0 0/400px 0.4em repeat-x; }

120% {

background: -webkit-repeating-linear-gradient(0deg, black 0%, black 20%, yellow 20%, yellow 40%, green 40%, green 60%, #105b63 60%, #105b63 80%, red 80%, red 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, black 0%, black 20%, yellow 20%, yellow 40%, green 40%, green 60%, #105b63 60%, #105b63 80%, red 80%, red 100%) 0 0/400px 0.4em repeat-x; }

140% {

background: -webkit-repeating-linear-gradient(0deg, red 0%, black 20%, black 20%, yellow 40%, yellow 40%, green 60%, green 60%, #105b63 80%, #105b63 80%, red 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, red 0%, black 20%, black 20%, yellow 40%, yellow 40%, green 60%, green 60%, #105b63 80%, #105b63 80%, red 100%) 0 0/400px 0.4em repeat-x; }

160% {

background: -webkit-repeating-linear-gradient(0deg, red 0%, red 20%, black 20%, black 40%, yellow 40%, yellow 60%, green 60%, green 80%, #105b63 80%, #105b63 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, red 0%, red 20%, black 20%, black 40%, yellow 40%, yellow 60%, green 60%, green 80%, #105b63 80%, #105b63 100%) 0 0/400px 0.4em repeat-x; }

180% {

background: -webkit-repeating-linear-gradient(0deg, #105b63 0%, red 20%, red 20%, black 40%, black 40%, yellow 60%, yellow 60%, green 80%, green 80%, #105b63 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, #105b63 0%, red 20%, red 20%, black 40%, black 40%, yellow 60%, yellow 60%, green 80%, green 80%, #105b63 100%) 0 0/400px 0.4em repeat-x; }

200% {

background: -webkit-repeating-linear-gradient(0deg, #105b63 0%, #105b63 20%, red 20%, red 40%, black 40%, black 60%, yellow 60%, yellow 80%, green 80%, green 100%) 0 0/400px 0.4em repeat-x;

background: repeating-linear-gradient(90deg, #105b63 0%, #105b63 20%, red 20%, red 40%, black 40%, black 60%, yellow 60%, yellow 80%, green 80%, green 100%) 0 0/400px 0.4em repeat-x; } }