您如何调整 CSS 以修复更改背景图像的关键帧引起的闪烁?
How do you adjust CSS to fix flickering from Keyframes changing the background image?
我有 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;
这很可能是等待下一张图片加载时出现的问题。
一个技巧是在原始规则中添加所有背景(使用多个背景)
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;
}
因此当转换发生时,它们将全部加载并准备就绪。
我有 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;
这很可能是等待下一张图片加载时出现的问题。
一个技巧是在原始规则中添加所有背景(使用多个背景)
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;
}
因此当转换发生时,它们将全部加载并准备就绪。