动态地使文本闪烁背景位置动画。

huangapple
go评论89阅读模式
英文:

Animating text shimmer background position dynamically

问题

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.

  1. h2 {
  2.   color: #F5C21B;
  3.   background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
  4.   -webkit-background-clip: text;
  5.   -webkit-text-fill-color: transparent;
  6.   font-family: 'Open Sans', sans-serif;
  7.   font-weight:800;
  8.   font-size:80px;
  9.   text-transform:uppercase;
  10.   position:relative;
  11. }
  13. h2:before {
  14.   background-position: -180px;
  15.   -webkit-animation: flare 5s infinite;
  16.   -webkit-animation-timing-function: linear;
  17.   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%);
  18.   -webkit-background-clip: text;
  19.   -webkit-text-fill-color: transparent;
  20.   content:attr(data-title);
  21.   color: #FFF;
  22.   display: block;
  23.   padding-right: 140px;
  24.   position: absolute;
  25. }
  27. /* Animations */
  28. @-webkit-keyframes flare {
  29.     0%   { background-position: -180px; }
  30.     30%  { background-position: 400px; }
  31.     100% { background-position: 400px; }
  32. }

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?

英文:

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. h2 {
  2.   color: #F5C21B;
  3.   background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
  4.   -webkit-background-clip: text;
  5.   -webkit-text-fill-color: transparent;
  6.   font-family: &#39;Open Sans&#39;, sans-serif;
  7.   font-weight:800;
  8.   font-size:80px;
  9.   text-transform:uppercase;
  10.   position:relative;
  11. }
  13. h2:before {
  14.   background-position: -180px;
  15. 	-webkit-animation: flare 5s infinite;
  16.   -webkit-animation-timing-function: linear;
  17.   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%);
  18.   -webkit-background-clip: text;
  19.   -webkit-text-fill-color: transparent;
  20.   content:attr(data-title);
  21.   color: #FFF;
  22.   display: block;
  23.   padding-right: 140px;
  24.   position: absolute;
  25. }
  27. /* Animations */
  28. @-webkit-keyframes flare {
  29.     0%   { background-position: -180px; }
  30.     30%  { background-position: 400px; }
  31.     100% { background-position: 400px; }
  32. }

<!-- language: lang-html -->

  1. &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;
  2. &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;
  3. &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  5. &lt;h2 data-title=&quot;Lorem&quot;&gt;Lorem&lt;/h2&gt;
  6. &lt;h2 data-title=&quot;Ipsum&quot;&gt;Ipsum&lt;/h2&gt;
  7. &lt;h2 data-title=&quot;Lorem Ipsum&quot;&gt;Lorem Ipsum&lt;/h2&gt;
  8. &lt;h2 data-title=&quot;Lorem Ipsum Dolor&quot;&gt;Lorem Ipsum Dolor&lt;/h2&gt;

<!-- end snippet -->

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?

答案1

得分: 1

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

  1. h2 {
  2.   background: 
  3.    /* gradient for the shimmer */
  4.     linear-gradient(65deg, 
  5.       #0000 calc(50% - 50px), #fff5 0, 
  6.       #fffb calc(50% + 50px), #0000 0),
  7.     /* gradient for the text */
  8.     linear-gradient(45deg, red, blue);
  9.   /* the sise of the first gradient is bigger than 100% */
  10.   background-size: calc(200% + 100px) 100%,100%;
  11.   -webkit-background-clip: text;
  12.   -webkit-text-fill-color: transparent;
  13.   animation: flare 3s infinite linear;
  14.   
  15.   font-family: sans-serif;
  16.   font-weight:800;
  17.   font-size:80px;
  18.   text-transform:uppercase;
  19.   margin: 0;
  20.   width: fit-content:
  21. }
  1. <h2>Lorem</h2>
  2. <h2>Ipsum</h2>
  3. <h2>Lorem Ipsum</h2>
  4. <h2>Lorem Ipsum Dolor</h2>
  2. <details>
  3. <summary>英文:</summary>
  5. 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`
  9. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  11. &lt;!-- language: lang-css --&gt;
  13.     h2 {
  14.       background: 
  15.        /* gradient for the shimmer */
  16.         linear-gradient(65deg, 
  17.           #0000 calc(50% - 50px), #fff5 0, 
  18.           #fffb calc(50% + 50px), #0000 0),
  19.         /* gradient for the text */
  20.         linear-gradient(45deg, red, blue);
  21.       /* the sise of the first gradient is bigger than 100% */
  22.       background-size: calc(200% + 100px) 100%,100%;
  23.       -webkit-background-clip: text;
  24.       -webkit-text-fill-color: transparent;
  25.       animation: flare 3s infinite linear;
  26.       
  27.       font-family: sans-serif;
  28.       font-weight:800;
  29.       font-size:80px;
  30.       text-transform:uppercase;
  31.       margin: 0;
  32.       width: fit-content:
  33.     }
  35.     /* you animate from right to left */
  36.     @keyframes flare {
  37.         0%   { background-position: right; }
  38.         30%,100%  { background-position: left; }
  39.     }
  41. &lt;!-- language: lang-html --&gt;
  43.     &lt;h2&gt;Lorem&lt;/h2&gt;
  44.     &lt;h2&gt;Ipsum&lt;/h2&gt;
  45.     &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
  46.     &lt;h2&gt;Lorem Ipsum Dolor&lt;/h2&gt;
  48. &lt;!-- end snippet --&gt;
  51.   [1]: https://stackoverflow.com/q/51731106/8620333
  53. </details>

huangapple
  • 本文由 发表于 2023年5月15日 02:48:56
  • 转载请务必保留本文链接：https://go.coder-hub.com/76249165.html
  • background-size
  • css
  • css-animations
  • linear-gradients
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定