我正在使用CSS關鍵幀給我的文本添加微光效果。效果很好，但我很難決定如何讓它與任何長度的文本一起工作，因為我目前使用像素值來確定背景位置的動畫效果

h2 {
  color: #F5C21B;
  background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Open Sans', sans-serif;
  font-weight:800;
  font-size:80px;
  text-transform:uppercase;
  position:relative;
}

h2:before {
  background-position: -180px;
    -webkit-animation: flare 5s infinite;
  -webkit-animation-timing-function: linear;
  background-image: linear-gradient(65deg, transparent 20%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.3) 27%, transparent 27%, transparent 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  content:attr(data-title);
  color: #FFF;
  display: block;
  padding-right: 140px;
  position: absolute;
}

/* Animations */
@-webkit-keyframes flare {
    0%   { background-position: -180px; }
    30%  { background-position: 400px; }
    100% { background-position: 400px; }
}

<link rel="preconnect" >
<link rel="preconnect"  crossorigin>
<link  rel="stylesheet">

<h2 data-title="Lorem">Lorem</h2>
<h2 data-title="Ipsum">Ipsum</h2>
<h2 data-title="Lorem Ipsum">Lorem Ipsum</h2>
<h2 data-title="Lorem Ipsum Dolor">Lorem Ipsum Dolor</h2>

我會首先考慮一個文本層，并更新如下代碼。我有一個詳細的答案，解釋了背景大小和背景位置之間的關系

h2 {
  background: 
   /* gradient for the shimmer */
    linear-gradient(65deg, 
      #0000 calc(50% - 50px), #fff5 0, 
      #fffb calc(50% + 50px), #0000 0),
    /* gradient for the text */
    linear-gradient(45deg, red, blue);
  /* the sise of the first gradient is bigger than 100% */
  background-size: calc(200% + 100px) 100%,100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: flare 3s infinite linear;
  
  font-family: sans-serif;
  font-weight:800;
  font-size:80px;
  text-transform:uppercase;
  margin: 0;
  width: fit-content:
}

/* you animate from right to left */
@keyframes flare {
    0%   { background-position: right; }
    30%,100%  { background-position: left; }
}

<h2>Lorem</h2>
<h2>Ipsum</h2>
<h2>Lorem Ipsum</h2>
<h2>Lorem Ipsum Dolor</h2>