html - 带有自动播放和覆盖文本的纯 CSS 3 图像滑块
问题描述
所以我试图在我正在做的网页项目上制作一个纯 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://codepen.io/anon/pen/OwWgoX
虽然 CodePen 搞砸了文本定位。
解决方案
您可以使用 wowslider。哇塞。只需下载软件。您可以轻松添加任何图片以及任何类型的滑动变换。
推荐阅读
- winapi - Windows API Mousehook , Capture rightmousebutton + Ctrl (WM_RBUTTONDOWN + MK_CONTROL) 一起点击
- javascript - 在组件返回中迭代数组后反应应用程序冻结
- php - 根据条件更改 Woocommerce Checkout URL
- vba - Access 中的 While 循环 VBA 出现问题
- linux - 用于从文件名中删除空格的 Bash 脚本
- spring - 无法通过 vscode 在 jhipster gradlew 中运行 SpringBootTest (java.lang.IllegalStateException: Failed to load ApplicationContext)
- asp.net - 在 asp.net mvc 中的主页本身(例如:sample.com)中显示视图
- mysql - 使用 MySQL DB 中的 Sqoop 连接多个表?
- tableau-api - Tableau - 使用产品对计算客户
- javascript - 如何制作一个像 HTML 标签一样接受值而不是从属性中获取值的 React 组件