[文字流光效果]React下给index.html添加首屏动效#html#css

animation.css

#root > #preLoader {
  width: 100%;
  text-align: center;
  padding-top: 15rem;
  font-size: 2rem;
  font-weight: bold;
}
#root > #preLoader > div > span#first {
  /*设置渐变背景，最好设置为能无缝拼接的渐变*/
  background-image: -webkit-linear-gradient(left, red, white 12.5%, red 25%, white 37.5%, red 50%, red 100%);
  /*文字填充色为透明*/
  -webkit-text-fill-color: transparent;
  /*背景剪裁为文字，相当于用背景填充文字*/
  -webkit-background-clip: text;
  /*将背景拉长一倍，给予移动变化空间，用作流光效果*/
  -webkit-background-size: 400% 100%;
  -webkit-animation: light 2s infinite linear;
}
#root > #preLoader > div > span#second {
  /*设置渐变背景，最好设置为能无缝拼接的渐变*/
  background-image: -webkit-linear-gradient(left, black, black 50%, white 62.5%, black 75%, white 87.5%, black 100%);
  /*文字填充色为透明*/
  -webkit-text-fill-color: transparent;
  /*背景剪裁为文字，相当于用背景填充文字*/
  -webkit-background-clip: text;
  /*将背景拉长一倍，给予移动变化空间，用作流光效果*/
  -webkit-background-size: 800% 100%;
  -webkit-animation: light 2s infinite linear;
}
@keyframes light {
  0%  {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}

index.html

<div id="root">
  <div id="preLoader">
    <div><span id="first">TCL</span> <span id="second">普惠</span></div>
  </div>
</div>