javascript - 如何在没有白色闪烁的背景上创建全屏交叉淡入淡出幻灯片?
问题描述
我正在使用 HTML 和 CSS 在我的网页上创建交叉淡入淡出的全屏幻灯片,但效果不佳。我可以在背景图像上创建交叉淡入淡出,但是有一个问题。在第一次加载时,每个图像之间都有白色闪烁。我不想避免白色闪烁。我该如何修复它们?
我用 HTML 和 CSS 编写了一个交叉淡入淡出的幻灯片。
<body>
<div class="slideshow">
</div>
</body>
body {
margin: 0;
padding: 0;
}
.slideshow {
height: 100vh;
weight: 100%;
background-image: url('../images/1.jpg');
background-size: cover;
animation: slide 24s infinite;
}
@keyframes slide {
25% {
background-image: url('../images/2.jpg');
background-size: cover;
}
50% {
background-image: url('../images/3.jpg');
background-size: cover;
}
75% {
background-image: url('../images/4.jpg');
background-size: cover;
}
}
我不需要白色闪烁并应用漂亮的淡入淡出幻灯片。
解决方案
闪烁的发生可能是因为浏览器绘制了一个新图像。
尝试为每张幻灯片创建单独的 <div>,将它们放在绝对位置,然后简单地将它们淡出。
<body>
<div class="slideshow">
<div class="slide slide-1"></div>
<div class="slide slide-2"></div>
<div class="slide slide-3"></div>
<div class="slide slide-4"></div>
</div>
</body>
.slideshow {
position: relative;
width: 100vw; height: 100vh;
}
.slide {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0; /* makes it full size */
opacity: 0;
transition: opacity 1s;
background-size: cover;
background-position: center;
}
.slide.active {
opacity: 1;
}
仅使用 CSS:
@keyframes slide-1 {
0% , 40% , 100% { opacity: 0; }
20% { opacity: 1; }
}
@keyframes slide-2 {
0% , 20% , 60% , 100% { opacity: 0; }
40% { opacity: 1; }
}
@keyframes slide-3 {
0% , 40% , 80% , 100% { opacity: 0; }
60% { opacity: 1; }
}
@keyframes slide-4 {
0% , 60% , 100% { opacity: 0; }
80% { opacity: 1; }
}
.slide-1 { animation: slide-1 24s infinite; background-image: url('../images/1.jpg'); }
.slide-2 { animation: slide-2 24s infinite; background-image: url('../images/2.jpg'); }
.slide-3 { animation: slide-3 24s infinite; background-image: url('../images/3.jpg'); }
.slide-4 { animation: slide-4 24s infinite; background-image: url('../images/4.jpg'); }
或者用 JS:
setInterval(function(){
var current = document.querySelector('.slide.active');
if (current.nextElementSibling) {
current.nextElementSibling.classList.add('active');
} else {
current.parentElement.firstElementChild.classList.add('active');
};
current.classList.remove('active');
}, 6000);
推荐阅读
- android - 来自不同类的片段中的启动方法
- javascript - 检查输入是否检查 ONLOAD 和 ONCHANGE
- java - 通过单击按钮进行 Google Duo 音频/视频通话
- java - 频繁的“偏移超出范围”消息,消费者遗弃的分区
- java - 从 Google 电子表格获取数据到我的应用程序的代码突然停止工作
- python - 在 Python 中发送发布请求以登录网站所涉及的步骤
- selenium - 我们应该在 @BeforeClass 中使用 assert 还是在 TestNG 中使用 @BeforeTest 注释,这样做是一个好习惯吗?
- java - 如何为 Firebase 数据库异常添加内置类的无参数构造函数?
- java - 事件监听器的控制流
- python-3.x - 用另一个值更新熊猫数据框的正确方法