具有自動播放和覆蓋文字的純CSS 3圖像滑塊

Question

因此，我嘗試在正在執行的網頁項目上制作一個純CSS3自動播放圖像滑塊。 因此頁面的HTML如下所示：

<!DOCTYPE html>
<html lang="pt">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/style.css">
  <title>Joelson Querub</title>
</head>

<body>
  <header>
    <nav>
      <a href="portfolio.html">Portfolio</a>
      <a href="sobre.html">Sobre</a>
      <a href="loja.html">Loja</a>
    </nav>
  </header>

  <main>
    <div id="pinto">
      <h1>Joelson Querub</h1>
      <div id="images">
        <img src="https://images.unsplash.com/photo-1517423568366-8b83523034fd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=92b82a18bf4bfbdfe1bd7eed8cd4ba49&auto=format&fit=crop&w=375&q=80"
          alt="Pug Fofoso">
        <img src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=71d59cd22de21da8d2939bc203617983&auto=format&fit=crop&w=1560&q=80"
          alt="Pug Fofoso">
        <img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e79d1986f31127432328ba0b78f0b510&auto=format&fit=crop&w=375&q=80"
          alt="Pug Fofoso">
        <img src="https://images.unsplash.com/photo-1529088363398-8efc64a0eb95?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=179403fa836a063432aec8ccc04ee248&auto=format&fit=crop&w=424&q=80"
          alt="Pug Fofoso">
      </div>
    </div>
  </main>
</body>

</html>

因此，我想要的是一次只顯示一個哈巴狗圖像，並使它們自動向左滑動。 大小很重要，當前大小是我想要的大小。 另外，請注意在圖像上覆蓋了文字。 該文本必須留在那里。 我想做一個平滑的無限滑動，但這並不能使返回的第一張圖像變得微妙。

我嘗試了一些CSS來實現好運，但是進展並不順利。 你們可以看看：

https://pastebin.com/S2UZ4uK2

或者以更簡單的方式查看全部內容：

https://codepen.io/anon/pen/OwWgoX

雖然CodePen弄亂了文本的位置。

Answer 1

您可以使用wowslider。 Wowslider 。 只需下載軟件。 您可以輕松添加任何圖片以及任何類型的滑動變換。

具有自動播放和覆蓋文字的純CSS 3圖像滑塊

問題描述

1 個解決方案

解決方案1
0 2018-07-21 03:59:19

具有自動播放和覆蓋文字的純CSS 3圖像滑塊

問題描述

1 個解決方案

解決方案1 0 2018-07-21 03:59:19

解決方案1
0 2018-07-21 03:59:19