在循环中使用CSS在图像之间交叉淡入淡出

dl5txlt9 于 2022-12-20 发布在其他

关注(0)|答案(4)|浏览(170)

我想在一个循环中的图像之间渐变（像这里的结果-jsfiddle.net/5M2PD），但纯粹通过CSS，没有JavaScript。我尝试使用关键帧，但我不成功。请帮助。

@keyframes cf3FadeInOut {
    0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

#cf3 img.top {
   animation-name: cf3FadeInOut;
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
   animation-duration: 10s;
   animation-direction: alternate;
}

css

来源：https://stackoverflow.com/questions/17954874/cross-fade-between-images-with-css-in-loop

4条答案

按热度按时间

pwuypxnk1#

我以你的小提琴为基础，使它不用剧本就能演奏。
∮ ∮ ∮ ∮
我需要为HTML设置一个ID

.fadein img {
    position:absolute;
    top:0;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 {
    background-color: lightblue;
}
#f2 {
    -webkit-animation-delay: -4s;
    background-color: yellow;
}
#f3 {
    -webkit-animation-delay: -2s;
    background-color: lightgreen;
}

<div class="fadein">
    <img id="f3" src="http://i.imgur.com/R7A9JXc.png">
    <img id="f2" src="http://i.imgur.com/D5yaJeW.png">
    <img id="f1" src="http://i.imgur.com/EUqZ1Er.png">
</div>

我设置了关键帧，使大约1/3的时间可见，并带有适当的过渡。然后我为每张图片设置了不同的延迟，以便它们交替出现。如果你想要完全的浏览器支持，你将需要更多的供应商前缀。我使用了-webkit-和bare property，这样你就明白了这个想法。

赞(0）回复(0）举报 2022-12-20

a64a0gku2#

我用SASS做了一个动态的解决方案，可以配置：

总动画时间
项目数量
过渡速度

它会自动计算关键帧百分比和项目之间的延迟。

// Demo styles
.fadecycle div {
  opacity: 0;
  position: absolute;
  width: 200px;
  line-height: 200px;
  text-align: center;
}

.fadecycle div:nth-child(1) { background: lightsalmon; }
.fadecycle div:nth-child(2) { background: lightsteelblue; }
.fadecycle div:nth-child(3) { background: lightseagreen; }
.fadecycle div:nth-child(4) { background: lightskyblue; }

// Animation settings
$totalTime: 8s;
$items: 4;
$transitionSpeed: 1.5;

// Calculate transition + display time in seconds
$transitionTime: 0s + $totalTime / ($items * $transitionSpeed * 2);
$displayTime: (0s + $totalTime - ($transitionTime * $items)) / $items;

// Set transition for each element
@for $i from 1 through $items {
  .fadecycle div:nth-child(#{$i}) {
    // Delay is increased for each item
    // starting with an offset of -$transitionTime so the first element is displayed on load
    $delay: -$transitionTime + ($transitionTime + $displayTime) * ($i - 1);
    animation: fadeinout $totalTime linear $delay infinite;
  }
}

// Calculate percentages of the times for keyframes
$transitionPercentage: 0% + 100 * ($transitionTime / $totalTime);
$displayPercentage: 0% + 100 * ($displayTime / $totalTime);

@keyframes fadeinout {
  0% {
    opacity: 0;
  }
  #{$transitionPercentage},
  #{$transitionPercentage + $displayPercentage} {
    opacity: 1;
  }
  #{$transitionPercentage + $displayPercentage + $transitionPercentage},
  100% {
    opacity: 0;
  }
}

赞(0）回复(0）举报 2022-12-20

lymgl2op3#

根据您需要的图像数量、每个图像显示的时间以及淡入淡出过渡持续的时间，您每次都需要不同的关键帧值。有关如何每次都正确执行此操作的有用帖子可以在此处找到：https://www.devtwins.com/blog/css-cross-fading-images

赞(0）回复(0）举报 2022-12-20

vm0i2vca4#

这里是另一个网站教交叉褪色图像，基于时间和事件，相对较小的CSS：
http://css3.bradshawenterprises.com/cfimg/

赞(0）回复(0）举报 2022-12-20