html - CSS淡入/淡出背景图像显示空白最后一个图像
问题描述
我一直在尝试将仅更改背景图像的 CSS 应用到 div,但由于某种原因,在指定的三个图像结束时,我得到一个背景只是原始黑色背景颜色的时期。更奇怪的是,如果我将转换时间切换为 4 秒,其中一张图像根本不会显示。有没有人有办法解决吗?该页面可以在这里找到(链接已删除)
CSS:* {填充:0;边距:0 }
body {
background-color: #000000;
}
.crossfade > figure {
animation: imageAnimation 30s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
.crossfade > figure:nth-child(1) {
background-image: url('assets/img/landing/gym_1.jpg');
}
.crossfade > figure:nth-child(2) {
animation-delay: 6s;
background-image: url('assets/img/landing/gym_2.jpg');
}
.crossfade > figure:nth-child(3) {
animation-delay: 12s;
background-image: url('assets/img/landing/weights.jpg');
}
@keyframes imageAnimation {
0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
HTML:
<div class="crossfade">
<figure></figure>
<figure></figure>
<figure></figure>
解决方案
我假设这是你的时间。
动画持续 30 秒,其中 75% 的时间opacity: 0
没有过渡。这意味着在 19.5 秒(25% + 12 秒延迟figure:nth-child(3)
)之后,接下来的 10.5 秒内没有任何可见的东西,直到动画再次开始figure:nth-child(1)
。
将其更改为所有值都是三分之一应该可以整理(即 66% 的时间已经opacity: 0
和更新延迟为10s
或持续时间为18s
)。或者,您可以有 4figures
并将延迟更改为7.5
.
推荐阅读
- python - 我安装了 conda 和 Python 分别安装
- routes - 通过助手访问路由组内的路由
- asp.net-core - 在 aspnet core 2.1 中使用 OpenXML 读取 500 MB xlsx 文件导致流太大
- javascript - 即使有嵌套,如何处理输入字符串数组并使它们与对象数组键匹配?
- python - request.resolver_match.kwargs 仅在 for 循环内有效?
- linux - usermod -a -G group user 未将用户添加到组但没有看到错误
- angular - 当用户调用 API 时,构建 observables 数组,并在所有解析时执行块
- c++ - 为什么 mac 开发者工具将 g++ 链接到 clang,而不是 clang++?
- google-apps-script - 如何设置(更改)Google Stackdriver 错误消息的语言?
- c# - 如何在 Unity 中输入 IP 地址?