Question

目标

在图像之间获得更平滑的过渡。此刻，我的图像之间有一个白色背景，持续了几毫秒。

问题

显然，我无法正确复制代码的这一部分，因为我认为您不能在 background-image：url（...）中使用链接。在我的实际代码中，我正在使用相对路径。

问题在于图片在第一次加载时过渡到白色之间，并且没有保存在缓存中。再次启动滑块时，过渡会更平滑，即不会显示白色背景。

摘要

我希望在第一次加载图片并且不将其保存在缓存中时在图片之间获得更平滑的过渡。怎么办呢？ （也欢迎使用jQuery）

    h1 {
      display: flex;
      justify-content: center;
      margin: 20vh 0;
      background-color: lightblue;
      padding: 50px;
    }


    @keyframes slide {
      0% {
        background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687");
      }

      25% {
        background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687");
      }

      25.01% {
        background-image: url("https://image.shutterstock.com/image-photo/micro-peacock-feather-hd-imagebest-260nw-1127238584.jpg");
      }

      50% {
        background-image: url("https://image.shutterstock.com/image-photo/micro-peacock-feather-hd-imagebest-260nw-1127238584.jpg");
      }

      50.1% {
        background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
      }

      75% {
        background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
      }

      75.1% {
        background-image: url("https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG");
      }

      100% {
        background-image: url("https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG");
      }
    }

    .slider {
      background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      animation: slide 30s infinite;
    }

    .load {
      animation: slide 2s;
    }

  <div class="slider"></div>
  <div class="load"></div>
  <h1>SOME CONTENT</h1>

更新

图像现在显示为以前缺少<div class="slider"></div>。在下面的第一个答案中指出了这一点。但是，图像之间的白色背景仍然存在。

Answer 1

您的滑块和load div没有显示，因为它们没有任何开头，并且没有在CSS中指定默认高度。我给滑块设置了30vh的高度和100％的宽度（我出于演示目的选择了该滑块）。我减少了h1周围的边距/边距（很多！），以便您可以在摘要中更好地看到图像。仍然可以更好地全屏观看。

我在css中添加了动画定时（渐进/渐出），以使动画的开始和结束变慢，从而使过渡看起来更加容易。默认值是easy，它使中间速度快；通过更改过渡速度，您的动画可能会显得更流畅。

希望这会有所帮助

    h1 {
      display: flex;
      justify-content: center;
      margin: 2vh 0;
      background-color: lightblue;
      padding: 15px;
    }


    @keyframes slide {
      0% {
        background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687");
      }

      25% {
        background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687");
      }

     25.01% {
        background-image: url("https://image.shutterstock.com/image-photo/micro-peacock-feather-hd-imagebest-260nw-1127238584.jpg");
      }

      50% {
        background-image: url("https://image.shutterstock.com/image-photo/micro-peacock-feather-hd-imagebest-260nw-1127238584.jpg");
      }

     50.1% {
        background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
      }

      75% {
        background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
      }

      75.1% {
        background-image: url("https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG");
      }

      100% {
        background-image: url("https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG");
      }
    }

    .slider {
      display:inline-block;
      background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      animation: slide 5s ease-in-out infinite;
       height:30vh;
       width:100%;
    }

    .load {
      animation: slide 5s infinite;
    }

 
  <h1>SOME CONTENT</h1>
  <div class="slider"></div>

在图像滑块动画中获得平滑过渡

1 个答案: