个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
你好，我想制作相互改变的背景图片，我意识到，使用 CSS 动画和关键帧是可能的，但是在我编写了第一轮照片闪烁之后，动画以正常方式继续之后(我认为，问题在于呈现内容和图像的 WebGL 尚未下载)。您能帮我修复此代码以防止出现这种情况吗？
.landing-page {
background-image: linear-gradient(
to bottom,
rgba(104, 104, 104, 0),
rgba(0, 0, 0, 0.739)
);
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
width: 100vw;
background-position: center;
display: flex;
align-items: flex-end;
animation: change 120s infinite ease-in-out;
}
@keyframes change {
0% {
background-image: url(/photos/profile1.jpg);
}
20% {
background-image: url(/photos/profile3.jpg);
}
40% {
background-image: url(/photos/profile4.jpg);
}
60% {
background-image: url(/photos/profile5.jpg);
}
80% {
background-image: url(/photos/profile6.jpg);
}
100% {
background-image: url(/photos/profile2.jpg);
}
}
最佳答案
您可以使用链接类型 preload 预加载图像:
The preload value of the element's rel attribute lets you declare fetch requests in the HTML's , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance. ref
<head>
<link rel="preload" as="image" href="/photos/profile1.jpg">
...
<link rel="preload" as="image" href="/photos/profile6.jpg">
还有链接类型prefetch .
此外，将第一帧放在最后，100%，以便在每次迭代之间平滑过渡:
@keyframes change {
0% { background-image: url(/photos/profile1.jpg); }
...
100% { background-image: url(/photos/profile1.jpg); }
}
关于html - 轻弹 css 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70276067/
26
4
0
你好，我想制作相互改变的背景图片，我意识到，使用 CSS 动画和关键帧是可能的，但是在我编写了第一轮照片闪烁之后，动画以正常方式继续之后(我认为，问题在于呈现内容和图像的 WebGL 尚未下载)。您能
我有一个 UIScrollView 和一个 UIView header ，它贴在 ScrollView 的顶部，并在用户向下滚动时从全尺寸缩小到小尺寸。当然，这些都是通过 ScrollView 委托(
我正在尝试使用 monkeyrunner 自动滚动浏览器。到目前为止，我可以通过“拖动”事件滚动，但如何通过“轻弹”滚动。如果你能给我一些点击或指导，我将不胜感激。 使用拖动: for i in ra
我正在使用 window.location.href('URL'); 使用 javascript 打开 Excel 文件 它在 Firefox、Safari 中工作正常，但在 IE8 中它显示一个空白
我有一个带有列表框的 Canvas 。列表框的每个子元素都为 Click 事件设置事件处理程序。在 Canvas 上，我为 设置了事件处理程序 ManipulationStarted="canvas_
我是一名优秀的程序员,十分优秀！