英文:
Fade-transitioning effect for background images - overlapping issue
问题
AIM
我想展示在三张图片之间进行淡入淡出的过渡效果（理想情况下是10张图片，本问题中使用了三张）。每张图片的不透明度应逐渐增加，直到完全不透明，然后下一张图片应开始相同的过程，即从不透明度0开始到1。
PROBLEM
如果您查看代码片段，您会注意到只有第三张图片遵循这种不透明度过程，而前两张图片在第一张图片重叠时显示得很模糊。
感谢您的帮助！
ATTEMPT
<body class="slider">
<div class="slide slide-1"></div>
<div class="slide slide-2"></div>
<div class="slide slide-3"></div>
</body>
.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;
}
}
英文:
AIM
I would like to show a faded transition among three pictures (ideally 10, I used three for this question). Each image should gradually increase its opacity until fully opaque and then the next picture should start the same process, i.e. starting from opacity 0 to 1.
PROBLEM
If you have a look at the snippet, you'd see that only the third image follows this opacity process while the first two are vaguely shown as the first image overlaps them.
Thanks for your help!
ATTEMPT
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade2 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade3 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<!-- language: lang-html -->
<body class="slider">
<div class="slide slide-1"></div>
<div class="slide slide-2"></div>
<div class="slide slide-3"></div>
</body>
<!-- end snippet -->
答案1
得分: 2
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。
看下面的概念验证：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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;
}
}
<!-- language: lang-html -->
<body class="slider">
<div class="slide slide-1"></div>
<div class="slide slide-2"></div>
<div class="slide slide-3"></div>
</body>
<!-- end snippet -->
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已经预编译）：
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-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;
<details>
<summary>英文:</summary>
CSS animation is doable but requires some kind of trick. The reason why your code does not work is because **all the CSS animations are happening at the same time**. What you want is to ensure that fade1, fade2, and fade3 all start and stop at consecutive intervals, so that they will come after each other:
* fade1 starts at 0% and ends at 33% (1/3)
* fade2 starts at 33% (1/3) and ends at 67% (2/3)
* fade3 starts at 67% (2/3) and ends at 100% (3/3)
Of course, this means that you will need to (1) declare a new keyframe for each slide added and (2) adjust the start/end points of *all* keyframes when a new slide is added. This can be cumbersome, and the only way to automate this (or do it programmatically) is to use JS or preprocessed CSS.
See proof-of-concept below:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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;
}
}
<!-- language: lang-html -->
<body class="slider">
<div class="slide slide-1"></div>
<div class="slide slide-2"></div>
<div class="slide slide-3"></div>
</body>
<!-- end snippet -->
***
## SCSS solution
If you are using a CSS preprocessor such as SCSS, you can simply generate slides on the fly: all you need is to remember to add the corresponding markup:
// 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;
}
}
}
See example below (the CSS has been precompiled):
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-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;
}
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
</details>
# 答案2
**得分**: 1
要实现淡入淡出效果，您需要在关键帧中添加百分比。这表示您希望图像在屏幕上出现的时间百分比。
对于这个示例，您选择了三个图像，因此每个图像的百分比为100/3，不过实际上是33.33333（您明白的意思）。
无论如何，以下是您三个图像的更新关键帧。要调整这些关键帧以适应10个图像，您只需使用100/10（每个图像10%）。
所有关键帧应该从0%开始的不透明度为0，然后在起始百分比处的不透明度为0（在第一个图像的情况下为33%）。然后在100%处的不透明度为0。
```css
@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;
}
}
如果您需要进一步解释，请告诉我。
英文:
To do a faded transition you need to add percentages to the keyframes. This depicts the percentage of time you would like the image to appear on screen.
For this example you picked three so it would be 100/3 which unfortunately is 33.33333(you get the idea.)
Anyway, here's the updated keyframes for your three images. To adjust these over 10 images you would simply need to 100/10 (10% for each image).
All should start with opacity 0 at 0% then opacity 0 at the starting percentage(in the first image's case it's 33%. Then 0 opacity at 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;
}
}
If you would like further explanation let me know.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论