时间戳

首页 > 解决方案 > 有没有办法在Firefox中实现图像的平滑过渡？这在 chrome 上效果很好

javascript - 有没有办法在Firefox中实现图像的平滑过渡？这在 chrome 上效果很好

问题描述

也许需要一些 javascript 请建议。您可以在 aditagarwal.com 上查看

CSS。

.images-wrapper{

    position: fixed;
    left: 0;
    top: 80px;
    bottom: 0;
    width: 100%;
    height: 100vh;
    animation: animate 16s ease-in-out infinite;// maybe something here
    background-size: cover;

}


@keyframes animate{

    0%,100%{
        background-image: url(coding2.jpeg);

    }
    25%{
        background-image: url(Flowers.png);
    }
    50%{
        background-image: url(Desert.png);
    }
    75%{
        background-image: url(sunset.png);
    }
}

HTML

       <div class="images-wrapper">

        </div>

标签： javascripthtmlcssimagefirefox

解决方案

由于您没有要求仅使用 CSS 的解决方案，因此我在这里使用了一些 JS 代码，它不断更改 BG。还要检查我添加transition:background 1s ease-in的内容，这使得过渡特别平滑。

const elem = document.getElementById("main");

const bg = [
  "https://wallpapercave.com/wp/wp2599605.jpg",
  "https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg"
];

elem.style.backgroundImage = `url(${bg[0]})`;
let i = 0;
setInterval(() => {
  i = i == 1 ? 0 : 1;
  elem.style.backgroundImage = `url(${bg[i]})`;
}, 2000);
div {
  position: fixed;
  left: 0;
  top: 80px;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-repeat:no-repeat;/*Modified for demo*/
  transition: background 1s ease-in;
}
<div id="main">
</div>

推荐阅读