<div class="light23">
  <div class="title23">
    <span>鸿</span>
    <span>星</span>
    <span>尔</span>
    <span>克</span>
  </div>
  <div class="info23">
    <span>to be number one</span>
  </div>
</div>

.light23{
  cursor: default;
}
.title23{
  color: #eaeaea;
  font-size: 32px;
  font-weight: 900;
}
.info23{
  color: #eaeaea;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: capitalize;  /* 设置英文首字母大写 */
}
.light23:hover .title23 span{
  animation: light 0.4s ease forwards; /* 设置 forwards 属性，让动画保持在最后一个值 */
}
.light23:hover .title23 span:nth-of-type(2){
  animation-delay: .14s;
}
.light23:hover .title23 span:nth-of-type(3){
  animation-delay: .42s;
}
.light23:hover .title23 span:nth-of-type(4){
  animation-delay: .78s;
}
@keyframes light{
  10%,30%,50%{
    color: #eaeaea;
    text-shadow: none;
  }
  20%,40%,60%{
    color: #318BF6;
    text-shadow: 0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;
  }
  100% {
    color: #318BF6;
    text-shadow:0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;
  }
}
.light23:hover .info23 span{
  animation: light 0.4s ease forwards;
  animation-delay: 1s;
}