html中背景色不断的变化,CSS3 不停变化的单一元素的渐变色背景动画

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

overflow: hidden;

}

body {

display: flex;

align-items: center;

justify-content: center;

}

h1 {

font-size: 95vh;

font-family: sans-serif;

position: relative;

background: white;

color: black;

margin: 0;

padding: 0;

overflow: hidden;

}

h1:before {

content: '';

display: block;

position: absolute;

-webkit-filter: blur(20px);

filter: blur(20px);

top: 0;

left: 0;

width: 100%;

height: 100%;

mix-blend-mode: screen;

background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, #9E2053 1em, orange 50%), repeating-linear-gradient(45deg, #111626, #111626 1em, pink 1em, #571B3D 50%);

background-size: 3em 3em, 2em 2em;

animation-name: ani;

animation-duration: 8s;

animation-timing-function: linear;

animation-iteration-count: infinite;

animation-direction: alternate;

}

@keyframes ani {

from {

background-position: 0 0;

}

to {

background-position: 400% 0;

}

}