コードを
- 角度と色の値を調整して効果を変更
<p class="gf-gx-color">我是帅哥</p>
<style>
.gf-gx-color {
background: -webkit-linear-gradient(135deg,
red,
red 25%,
red 50%,
#fff 55%,
red 60%,
red 80%,
red 95%,
red);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
-o-background-clip: text;
background-clip: text;
-webkit-background-size: 200% 100%;
-moz-background-size: 200% 100%;
-o-background-size: 200% 100%;
background-size: 200% 100%;
-webkit-animation: gf-gx 4s infinite linear;
-moz-animation: gf-gx 4s infinite linear;
-o-animation: gf-gx 4s infinite linear;
animation: gf-gx 4s infinite linear;
}
@keyframes gf-gx {
0% {
/* 移动背景位置 */
background-position: 0 0;
}
100% {
background-position: -400% 0;
}
}
</style>
レンダリング
白い光のビームがシュアイに流れ込んだ