色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

我想在hover上開始一個圖像幻燈片，從一張圖片到下一張圖片沒有奇怪的過渡，只使用CSS.我該怎么做？

CSS
錢多多2年前8瀏覽0評論

我想在hover上開始一個圖像幻燈片，從一張圖片到下一張圖片沒有奇怪的過渡，只使用CSS。我嘗試使用steps()函數，它應該完全按照我描述的那樣工作，但是仍然會發生轉換

我怎樣才能實現我的目標？

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#image-slideshow {
  width: 300px;
  height: 200px;
  border: 3px solid black;
  border-radius: 5px;
  background: url("https://cdn.britannica.com/74/182174-050-6755AB49/balloon-sky.jpg") top/cover no-repeat;;
}

#image-slideshow:hover {
  animation: 5s steps(2) infinite slideshow;
}

@keyframes slideshow {
  33% {
    background: url("https://caloxinc.com/wp-content/uploads/2022/12/blog-blimp-helium-flying.jpg") top/cover no-repeat;
  }

  66% {
background: url("https://img.canarymedia.com/content/uploads/ZeroAvia-19-seat-prototype.jpg?auto=compress%2Cformat&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=501&q=80&w=864&s=f1906dc9c8bd745878b612dfce20ad5c") top/cover no-repeat;
  }
}

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Slideshow on hover</h1>
    <div id="image-slideshow"></div>
  </body>
</html>

根據我的理解，steps()中傳遞的數字表示動畫中從0%到100%的停止次數。例如，步驟(2)將在動畫中停留2次。第一步，在圖像之間添加部分切換，第二步，完成切換。這個數字越大，切換需要的步驟就越多。這可以用來實現平滑過渡。試著將這個數字設置為100，你會看到圖像之間更平滑過渡。將該數字設置為1意味著轉換將在第一步發生。