闪烁效果的HTML动画

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

Shine effect html animation

问题

  1. 我在动画方面遇到问题，我希望过渡只发生一次，或者在两侧不可见。文本停在中间或两侧，尝试改变背景位置也没有起作用。
  1.  <div class="content">
  2.         <p> Lorem Ipsum只是印刷和排版业的虚拟文本。 Lorem Ipsum自1500年以来一直是该行业的标准虚拟文本</p>
  3.         </div>
  1.  .content p{
  2.     font-size: 20px;
  3.     line-height: 35px;
  4.     font-weight: bold;
  5.     font-family: sans-serif;
  6.     cursor: pointer;
  8. }
  9. .content p{
  10.     background: linear-gradient(to right, white, hsl(0, 0%, 0%) 10%);
  11.     -webkit-background-clip: text;
  12.     -webkit-text-fill-color: transparent;
  13.     animation: shine 2s infinite linear;
  15. }
  17. @keyframes shine {
  18.   0% {
  19.     background-position: 0;
  20.   }
  21.   60% {
  22.     background-position: 600px;
  23.   }
  24.   100% {
  25.     background-position: 600px;
  26.   }
  27. }
英文:

I have a problem with the animation, I would like the transition to happen only once, or not be visible on both sides. The text stops in the middle or on the sides, trying to change background-position it also did not work

  1.  <div class="content">
  2.         <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  3.         </div>
  1.  .content p{
  2.     font-size: 20px;
  3.     line-height: 35px;
  4.     font-weight: bold;
  5.     font-family: sans-serif;
  6.     cursor: pointer;
  8. }
  9. .content p{
  10.     background: linear-gradient(to right, white, hsl(0, 0%, 0%) 10%);
  11.     -webkit-background-clip: text;
  12.     -webkit-text-fill-color: transparent;
  13.     animation: shine 2s infinite linear;
  15. }
  17. @keyframes shine {
  18.   0% {
  19.     background-position: 0;
  20.   }
  21.   60% {
  22.     background-position: 600px;
  23.   }
  24.   100% {
  25.     background-position: 600px;
  26.   }
  27. }

答案1

得分: 3

使用Reza的代码，我成功地通过将".content div"中的"animation:shine 2.5s infinite;"更改为"animation:shine 2.5s 1;"，以及"left"更改为"-100px"来进行轻微修改。

  1.       .content {
  2.       position: relative;
  3.       overflow: hidden;
  4.       width: 600px;
  5.     }
  7.     .content p {
  8.       font-size: 20px;
  9.       line-height: 35px;
  10.       font-weight: bold;
  11.       font-family: sans-serif;
  12.       cursor: pointer;
  13.     }
  15.     .content div {
  16.       position: absolute;
  17.       top: 0;
  18.       height: 100%;
  19.       left: -100px;
  20.       width: 30%;
  21.       background: linear-gradient(to right, white, transparent 50%);
  22.       -webkit-text-fill-color: transparent;
  23.       animation: shine 2.5s 1;
  24.       overflow: hidden;
  25.     }
  27.     @keyframes shine {
  28.       0% {
  29.         left: -10%;
  30.       }
  31.       100% {
  32.         left: 110%;
  33.       }
  1.     <div class="content">
  2.       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  3.       <div>
  4.       </div>
  5.     </div>

原始代码链接

英文:

Using Reza's code, I was able to modify slightly ".content div" by changing "animation:shine 2.5s infinite;" to "animation:shine 2.5s 1;", and "left" to "-100px".

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

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

  1.   .content {
  2.   position: relative;
  3.   overflow: hidden;
  4.   width: 600px;
  5. }
  7. .content p {
  8.   font-size: 20px;
  9.   line-height: 35px;
  10.   font-weight: bold;
  11.   font-family: sans-serif;
  12.   cursor: pointer;
  13. }
  15. .content div {
  16.   position: absolute;
  17.   top: 0;
  18.   height: 100%;
  19.   left: -100px;
  20.   width: 30%;
  21.   background: linear-gradient(to right, white, transparent 50%);
  22.   -webkit-text-fill-color: transparent;
  23.   animation: shine 2.5s 1;
  24.   overflow: hidden;
  25. }
  27. @keyframes shine {
  28.   0% {
  29.     left: -10%;
  30.   }
  31.   100% {
  32.     left: 110%
  33.   }

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

  1. &lt;div class=&quot;content&quot;&gt;
  2.   &lt;p&gt; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s&lt;/p&gt;
  3.   &lt;div&gt;
  4.   &lt;/div&gt;
  5. &lt;/div&gt;

<!-- end snippet -->

https://jsfiddle.net/jasonbruce/1gdx706t/1/

huangapple
  • 本文由 发表于 2023年2月19日 03:32:54
  • 转载请务必保留本文链接：https://go.coder-hub.com/75495894.html
  • css
  • css-animations
  • html
匿名

发表评论

匿名网友

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

确定