Html 纯CSS 3图像滑块，带自动播放和覆盖文本_Html_Css_Animation

Html 纯CSS 3图像滑块，带自动播放和覆盖文本

html css animation

Html 纯CSS 3图像滑块，带自动播放和覆盖文本,html,css,animation,Html,Css,Animation,所以我正试图在我正在做的一个网页项目上制作一个纯CSS3自动播放图像滑块。因此，页面的HTML如下所示：乔尔森·奎鲁布乔尔森·奎鲁布所以我想要的是一次只出现一个哈巴狗图像，让它们自动向左滑动。尺寸很重要，当前的尺寸就是我想要的尺寸。另外，请注意，有一个文本覆盖在图像上。该文本必须保留在那里。我想做一个无限平滑的幻灯片，但这并不能微妙地返回到第一张图片我尝试了一些CSS的运气，但没有走多远。你们可以看看：或者，为了更容易地了解这一切：虽然CodePen会弄乱文本定位。您可以使

所以我正试图在我正在做的一个网页项目上制作一个纯CSS3自动播放图像滑块。因此，页面的HTML如下所示：


乔尔森·奎鲁布
乔尔森·奎鲁布

所以我想要的是一次只出现一个哈巴狗图像，让它们自动向左滑动。尺寸很重要，当前的尺寸就是我想要的尺寸。另外，请注意，有一个文本覆盖在图像上。该文本必须保留在那里。我想做一个无限平滑的幻灯片，但这并不能微妙地返回到第一张图片

我尝试了一些CSS的运气，但没有走多远。你们可以看看：

或者，为了更容易地了解这一切：

虽然CodePen会弄乱文本定位。

您可以使用wowslider。只需下载软件。您可以轻松添加任何图片和任何类型的滑动变换

请把你的建议说得更具体些。现在你说的是“请修复我的代码”，而不是“请帮助我修复我代码的这个特定问题”。

<!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>