发光效果html动画

发布于02月19日

我有一个动画的问题，我希望过渡只发生一次，或者在两面都看不到.文本停在中间或边上，试图更改背景位置-它也不起作用

 <div class="content">
        <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>
        </div>

 .content p{
    font-size: 20px;
    line-height: 35px;
    font-weight: bold;
    font-family: sans-serif;
    cursor: pointer;

}
.content p{
    background: linear-gradient(to right, white, hsl(0, 0%, 0%) 10%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 2s infinite linear;

}

@keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 600px;
  }
  100% {
    background-position: 600px;
  }
}

推荐答案

使用Reza的代码，我可以略微修改".content div"，将"动画:闪耀2.5s无限"更改为"动画:闪耀2.5s 1；"，将"左"更改为"-100px".

  .content {
  position: relative;
  overflow: hidden;
  width: 600px;
}

.content p {
  font-size: 20px;
  line-height: 35px;
  font-weight: bold;
  font-family: sans-serif;
  cursor: pointer;
}

.content div {
  position: absolute;
  top: 0;
  height: 100%;
  left: -100px;
  width: 30%;
  background: linear-gradient(to right, white, transparent 50%);
  -webkit-text-fill-color: transparent;
  animation: shine 2.5s 1;
  overflow: hidden;
}

@keyframes shine {
  0% {
    left: -10%;
  }
  100% {
    left: 110%
  }

<div class="content">
  <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>
  <div>
  </div>
</div>

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