html中背景渐变斜着渐变,CSS3 斜向渐变背景

CSS

语言：

CSSSCSS

确定

* {

padding: 0;

margin: 0;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.lol {

height: 100vh;

background: -webkit-linear-gradient(135deg, #3a342a 0%, #9b4a1b 40%, #3a342a 100%);

background: linear-gradient(-45deg, #3a342a 0%, #9b4a1b 40%, #3a342a 100%);

-webkit-animation: hue 3s linear infinite;

animation: hue 3s linear infinite;

}

@-webkit-keyframes slide {

from {

background-position: 0 0;

}

to {

background-position: 100vw 0;

}

}

@keyframes slide {

from {

background-position: 0 0;

}

to {

background-position: 100vw 0;

}

}

@-webkit-keyframes hue {

from {

-webkit-filter: hue-rotate(0deg);

filter: hue-rotate(0deg);

}

to {

-webkit-filter: hue-rotate(360deg);

filter: hue-rotate(360deg);

}

}

@keyframes hue {

from {

-webkit-filter: hue-rotate(0deg);

filter: hue-rotate(0deg);

}

to {

-webkit-filter: hue-rotate(360deg);

filter: hue-rotate(360deg);

}

}