gpt4 book ai didi

html - 具有自动播放和覆盖文本的纯 CSS 3 图像 slider

转载 作者:行者123 更新时间:2023-11-28 01:21:51 29 4
gpt4 key购买 nike

所以我试图在我正在做的网页元素上制作一个纯 CSS3 自动播放图像 slider 。所以页面的 HTML 看起来像这样:

https://pastebin.com/c0ZiyHGd

<!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 弄乱了文本定位。

最佳答案

您可以使用 wowslider。 Wowslider .只需下载该软件。您可以轻松添加任何图片以及任何类型的滑动转换。

关于html - 具有自动播放和覆盖文本的纯 CSS 3 图像 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51452475/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com