如何调整CSS以修复关键帧中的闪烁，以更改背景图像？
如何调整CSS以修复关键帧中的闪烁，以更改背景图像？
提问于 2021-01-14 15:58:34
我有11个图片，我想成为我的应用背景和定期变化。我真的很喜欢关键帧的效果，因为它们是如何通过渐入渐出的方式从一个转换到另一个的。然而，当图像发生变化时，会出现闪烁。
到目前为止，我已经尝试添加：
-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);
-webkit-transform-style: preserve-3d;然而，到目前为止，这还没有解决闪烁的问题。是否有办法解决这一问题仅使用CSS？我打赌有一个JS解决方案，但我不知道如何在JS中给它一个关键帧类型的效果。
CSS
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
body {
opacity: 0.8;
background: url("../../assets/allmight.jpeg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
animation: rotateBg 60s infinite;
background-size: cover;
}
@keyframes rotateBg {
0% {
background: url("../../assets/allmight.jpeg") no-repeat center center fixed;
}
10% {
background: url("../../assets/groupshot.jpeg") no-repeat center center fixed;
}
20% {
background: url("../../assets/battle.jpeg") no-repeat center center fixed;
}
30% {
background: url("../../assets/dekuPunk.png") no-repeat center center fixed;
}
40% {
background: url("../../assets/endeavor.jpeg") no-repeat center center fixed;
}
50% {
background: url("../../assets/group2.jpeg") no-repeat center center fixed;
}
60% {
background: url("../../assets/hug.jpeg") no-repeat center center fixed;
}
70% {
background: url("../../assets/allmightback.jpeg") no-repeat center center
fixed;
}
80% {
background: url("../../assets/deku.png") no-repeat center center fixed;
}
90% {
background: url("../../assets/allmightRaiseFist.jpeg") no-repeat center
center fixed;
}
100% {
background: url("../../assets/allmight.jpeg") no-repeat center center fixed;
}
}
React/JS
import React from "react";
import MainPage from "../MainPage/MainPage";
import "./App.scss";
import { Route, Switch } from "react-router-dom";
import EpisodeDisplay from "../EpisodeDisplay/EpisodeDisplay";
const App = () => {
return (
<>
<Switch>
<Route exact path="/" render={() => <MainPage />} />
<Route path="/:season" component={EpisodeDisplay} />
</Switch>
</>
);
};
export default App;
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-14 16:17:58
这很可能是等待下一个映像加载的问题。
一个技巧是在原始规则中添加所有背景(使用多个背景)。
body {
opacity: 0.8;
background:
url("../../assets/allmight.jpeg") no-repeat center center fixed,
url("../../assets/groupshot.jpeg"),
url("../../assets/battle.jpeg"),
url("../../assets/dekuPunk.png"),
url("../../assets/endeavor.jpeg"),
url("../../assets/group2.jpeg"),
url("../../assets/hug.jpeg"),
url("../../assets/allmightback.jpeg"),
url("../../assets/deku.png"),
url("../../assets/allmightRaiseFist.jpeg"),
url("../../assets/allmight.jpeg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
animation: rotateBg 60s infinite;
background-size: cover;
}因此，当转换发生时，它们都将加载并准备就绪。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65722390
复制相关文章
相似问题
腾讯云开发者
