问题

I am using CSS keyframes to add a shimmer effect to my text. The effect is working great but I'm having a hard time determining how to make it work with any length of text since I am currently using pixel values to determine how far to animate the background-position.

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; }
}

I would like for the "flare" animation to start to the left of the text out of view and end to the right of the text out of view. I tried using percentages for the background-position animation, but then the animation wouldn't work. Is there any way to modify this so that the flare animation works for any length/font-size of text?

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" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap" 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>

答案1

得分: 1

我首先会考虑一个文本层并更新代码如下。我有一个详细的答案，解释了background-size和background-position之间的关系。

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:
}

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

<details>
<summary>英文:</summary>

I would first consider one text layer and update the code like below. I have [a detailed answer][1] that explain the relation between `background-size` and `background-position`



&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    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; }
    }

&lt;!-- language: lang-html --&gt;

    &lt;h2&gt;Lorem&lt;/h2&gt;
    &lt;h2&gt;Ipsum&lt;/h2&gt;
    &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
    &lt;h2&gt;Lorem Ipsum Dolor&lt;/h2&gt;

&lt;!-- end snippet --&gt;


  [1]: https://stackoverflow.com/q/51731106/8620333

</details>