使用linear-gradient控制背景渐变
<div class="bruce">
<div class="gradient-bg">iCSS</div>
</div>
.gradient-bg {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background: linear-gradient(135deg, $red, $orange, $green, $blue, $purple) left center/400% 400%;
font-weight: bold;
font-size: 100px;
color: #fff;
animation: move 10s infinite;
}
@keyframes move {
0%,
100% {
background-position-x: left;
}
50% {
background-position-x: right;
}
}
使用linear-gradient控制文本渐变
<div class="bruce flex-ct-x">
<h1 class="gradient-text">Full Stack Developer</h1>
</div>
.gradient-text {
background-image: linear-gradient(90deg, $red, $orange);
background-clip: text;
line-height: 60px;
font-size: 60px;
animation: hue 5s linear infinite;
-webkit-text-fill-color: transparent;
}
@keyframes hue {
from {
filter: hue-rotate(0);
}
to {
filter: hue-rotate(-1turn);
}
}