背景图像的淡入淡出过渡效果 - 重叠问题 - Fade-transitioning effect for background images

AIM

我想展示三张图片之间的褪色过渡(理想情况下是 10 张，我在这个问题中使用了三张(。每个图像应逐渐增加其不透明度，直到完全不透明，然后下一张图片应开始相同的过程，即从不透明度 0 到 1 开始。

问题

如果您查看该片段，您会发现只有第三张图像遵循此不透明度过程，而前两张图像则模糊显示，因为第一张图像与它们重叠。

感谢您的帮助！

尝试

.slider {
margin: 0;
padding: 0;
}

.slide {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.slide-1 {
background-image: url("https://images.immediate.co.uk/production/volatile/sites/23/2019/10/Federico_Veronesi_Lions-cover-image-e359a4e.jpg?quality=45&crop=10px,234px,3691px,2458px&resize=620,413");
animation: fade1 10s infinite;
}
.slide-2 {
background-image: url("https://images.unsplash.com/photo-1490100886609-e401a775fb3a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
animation: fade2 10s infinite;
}
.slide-3 {
background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
animation: fade3 10s infinite;
}
@keyframes fade1 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade2 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade3 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

<body class="slider">
<div class="slide slide-1"></div>
<div class="slide slide-2"></div>
<div class="slide slide-3"></div>
</body>

CSS动画是可行的，但需要某种技巧。代码不起作用的原因是所有 CSS 动画同时发生。你想要的是确保 fade1、fade2 和 fade3 都以连续的间隔开始和停止，以便它们彼此跟随：

fade1 从 0% 开始，到 33% 结束 (1/3(
fade2 从 33% (1/3( 开始，到 67% (2/3( 结束
fade3 从 67% (2/3( 开始，到 100% (3/3( 结束

当然，这意味着您需要 (1( 为添加的每张幻灯片声明一个新关键帧，以及 (2( 在添加新幻灯片时调整所有关键帧的起点/终点。这可能很麻烦，自动化(或以编程方式(的唯一方法是使用 JS 或预处理的 CSS。

请参阅下面的概念验证：

.slider {
margin: 0;
padding: 0;
}

.slide {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.slide-1 {
background-image: url("https://images.immediate.co.uk/production/volatile/sites/23/2019/10/Federico_Veronesi_Lions-cover-image-e359a4e.jpg?quality=45&crop=10px,234px,3691px,2458px&resize=620,413");
animation: fade1 10s infinite;
}
.slide-2 {
background-image: url("https://images.unsplash.com/photo-1490100886609-e401a775fb3a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
animation: fade2 10s infinite;
}
.slide-3 {
background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
animation: fade3 10s infinite;
}
@keyframes fade1 {
0% {
opacity: 0;
}
33% {
opacity: 1;
}
}
@keyframes fade2 {
33% {
opacity: 0;
}
67% {
opacity: 1;
}
}
@keyframes fade3 {
67% {
opacity: 0;
}
100% {
opacity: 1;
}
}

<body class="slider">
<div class="slide slide-1"></div>
<div class="slide slide-2"></div>
<div class="slide slide-3"></div>
</body>

SCSS 解决方案

如果您使用的是 CSS 预处理器(如 SCSS(，您可以简单地即时生成幻灯片：您只需要记住添加相应的标记：

// Just some demo images
$images: [
'https://via.placeholder.com/400x300/3077FF/fff?text=Slide1',
'https://via.placeholder.com/400x300/2C9EE8/fff?text=Slide2',
'https://via.placeholder.com/400x300/3DE4FF/fff?text=Slide3',
'https://via.placeholder.com/400x300/2CE8CE/fff?text=Slide4',
'https://via.placeholder.com/400x300/30FFA8/fff?text=Slide5',
];
.slide {
position: absolute;
width: 400px;
height: 300px;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
}
@for $i from 1 through length($images) {
$image: nth($images, $i);
// Custom animation styles and background image for each slide
.slide-#{$i} {
animation: fade#{$i} 10s infinite;
background-image: url(#{$image});
}
// Generate keyframe for each slide
@keyframes fade#{$i} {
#{(($i - 1) / length($images)) * 100%} {
opacity: 0;
}
#{($i / length($images)) * 100%} {
opacity: 1;
}
}
}

请参阅下面的示例(CSS 已预编译(：

.slider {
margin: 0;
padding: 0;
}
.slide {
position: absolute;
width: 400px;
height: 300px;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
}
.slide-1 {
animation: fade1 10s infinite;
background-image: url(https://via.placeholder.com/400x300/3077FF/fff?text=Slide1);
}
@keyframes fade1 {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
}
.slide-2 {
animation: fade2 10s infinite;
background-image: url(https://via.placeholder.com/400x300/2C9EE8/fff?text=Slide2);
}
@keyframes fade2 {
20% {
opacity: 0;
}
40% {
opacity: 1;
}
}
.slide-3 {
animation: fade3 10s infinite;
background-image: url(https://via.placeholder.com/400x300/3DE4FF/fff?text=Slide3);
}
@keyframes fade3 {
40% {
opacity: 0;
}
60% {
opacity: 1;
}
}
.slide-4 {
animation: fade4 10s infinite;
background-image: url(https://via.placeholder.com/400x300/2CE8CE/fff?text=Slide4);
}
@keyframes fade4 {
60% {
opacity: 0;
}
80% {
opacity: 1;
}
}
.slide-5 {
animation: fade5 10s infinite;
background-image: url(https://via.placeholder.com/400x300/30FFA8/fff?text=Slide5);
}
@keyframes fade5 {
80% {
opacity: 0;
}
100% {
opacity: 1;
}
}

<div class="slider">
<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 class="slide slide-5"></div>
</div>

要执行淡入淡出的过渡，您需要向关键帧添加百分比。这描述了您希望图像在屏幕上显示的时间百分比。对于这个例子，你选择了三个，所以它是 100/3，不幸的是是 33.33333(你明白了。

无论如何，这是三个图像的更新关键帧。要调整这些超过 10 张图像，您只需调整为 100/10(每张图像 10%(。

所有内容都应从不透明度 0 开始，为 0%，然后不透明度 0 以起始百分比开始(在第一张图像的情况下为 33%(。然后 0 不透明度为 100%。

@keyframes fade1 {
0% {
opacity: 0;
}
33% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fade2 {
0% {
opacity: 0;
}
33% {
opacity: 0;
}
66% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fade3 {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}

如果您想进一步解释，请告诉我。

背景图像的淡入淡出过渡效果 - 重叠问题

SCSS 解决方案

相关内容

最新更新

热门标签：