我有一个带有以下 CSS 的微光 React 组件
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/
谁能帮我用类似的脱线方式做微光效果?
最佳答案
按照链接中的建议使用转换。这是一个伪元素的想法:
.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>
关于javascript - 具有阻塞 JavaScript 的 CSS Shimmer 效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58366774/