html css 彩虹,css

css

body{

background: linear-gradient(#f70000, #f89200, #f8f501, #038f00,#0168f8, #a200f7);

}

h1{

font-family: 'Teko', sans-serif;

text-transform: uppercase;

font-size: 10rem;

text-align: center;

display: -webkit-flex;

display: flex;

-webkit-align-items: center;

align-items: center;

-webkit-justify-content: center;

justify-content: center;

margin: 0;

min-height: calc(100vh - 16px);

background: white;

position: relative;

background: #171717;

color: #000;

}

h1:before{

content: attr(data-text);

position: absolute;

background: linear-gradient(#f70000, #f89200, #f8f501, #038f00,#0168f8, #a200f7);

-webkit-background-clip: text;

color: transparent;

background-size: 100% 90%;

line-height: 0.9;

clip-path: ellipse(120px 120px at -2.54% -9.25%);

animation: swing 5s infinite;

animation-direction: alternate;

}

@keyframes swing{

0%{

clip-path: ellipse(120px 120px at -2.54% -9.25%)

}

50%{

clip-path: ellipse(120px 120px at 49.66% 64.36%);

}

100%{

clip-path: ellipse(120px 120px at 102.62% -1.61%)

}

}