CSS 带有阻挡的微光效果 JavaScript

Question

我有一个带有以下内容的微光 React 组件 CSS

background: #ebebeb;
background-image: linear-gradient(to right,  #ebebeb 0%, #c5c5c5 20%,  #ebebeb 40%,  #ebebeb 100%);

而我为其应用的动画关键帧如下：

{
    0%: { background-position: -468px 0 };
    100%: { background-position: 468px 0 };
}

我的主页挂载量很大。所以动画冻结了大约一秒钟左右。我读到动画过渡是在线程外完成的 https://www.phpied.com/css-animations-off-the-ui-thread/

谁能帮我用类似的脱线方式做微光效果？

Answer 1

按照 link 中的建议使用变换。这是一个伪元素的想法：

.box {
  background-image: linear-gradient(to right, #ebebeb calc(50% - 100px), #c5c5c5 50%, #ebebeb calc(50% + 100px));
  background-size:0;
  height: 200px;
  position:relative;
  overflow:hidden;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:calc(200% + 200px);
  bottom:0;
  background-image:inherit;
  animation:move 2s linear infinite; 
}
@keyframes move{
  to {
    transform:translateX(calc(50% + 100px));
  }
}

<div class="box">

</div>

CSS 带有阻挡的微光效果 JavaScript

CSS Shimmer effect with blocking JavaScript

javascript

css

linear-gradients

css-animations