我有两个div元素，每个元素都包含文本。我想让一个淡入div另一个，div这样当一个消失时，另一个就会出现，然后循环重复。有谁知道这是怎么做到的吗？我什至不知道从哪里开始。
<div>
<div>Expand your knowledge</div>
<div>Blah Blah Blah</div>
</div>
div这些是应该在一个循环中从一个元素过渡到另一个元素的两个元素。
首先，我将向您的 HTML 元素添加类以用作样式挂钩，这将使使用它们变得更容易。使用类来实现 CSS 中的大部分样式也是最佳实践。包装类，或者动画的“舞台”，将获得 class fader-stage。每个“幻灯片”（我将调用div将淡出并进入另一个元素的每个元素）都会应用相同的通用类，fader-slide并且我还为每个单独的幻灯片应用一个唯一的类，表示其在演示文稿中的编号顺序（fader-slide--1如果fader-slide--2要添加更多元素，则按 、 等顺序）。
<div class="fader-stage">\n <div class="fader-slide fader-slide--1">Expand your knowledge</div>\n <div class="fader-slide fader-slide--2">Blah Blah Blah</div>\n</div>\n现在是CSS！...我将首先使用我们在上一步中添加到 HTML 中的div类钩子来设计包装元素的样式 。fader-stage
.fader-stage {\n border: 2px solid #000;\n height: 12rem;\n margin: 2rem auto;\n position: relative;\n width: 50%;\n}\n这种风格中您绝对必须保持“原样”的唯一部分是position: relative。我们在包含元素上使用它，这样当我们position: absolute在下一步中使用子元素时，它不会使它们根据文档的根元素定位自己，而是根据最近的相对定位祖先定位自己元素（这个）。这个包装类中的其他所有内容都可以根据您的喜好或项目的特定规范进行更改。
现在我们使用@keyframes它将opacity级别从1到 来创建一个简单的动画0。看来我们可以保持简单，只调用effect fade-out。animation我们将在下一步中将此标识符与属性一起使用。如果您想了解有关 CSS at 规则的更多信息，可以在此处阅读有关关键帧的更多信息。
@keyframes fade-out {\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n}\n现在我们需要为您想要淡入其中的“幻灯片”元素设置样式。我们将使用已应用于所有幻灯片的通用类，fader-slide.
我在 上设置了一些非常通用的样式fader-slide。我想让每张幻灯片在包装中占据最大的空间div，并将每张幻灯片的所有内容居中。
我使用position: absolute这种方法将每张幻灯片从文档的正常流程中取出，这将有效地让它们彼此叠放。然后，我将top和left属性设置为 ，0以便将元素从舞台的左上角开始定位。如果我们没有在上一步中将position属性设置为relative元素fader-stage，则这样做会将幻灯片定位在文档的左上角。
我使用了Flexbox属性来轻松确保幻灯片内的所有内容都水平和垂直居中。
\n\n最重要的是，我还应用了fade-out我们在keyframes上面步骤中制作的动画。我告诉动画遍历名为keyframes的动画fade-out，该动画的持续时间为 2.5 秒，在制作动画时使用ease-out 动画计时函数，运行一定infinite时间，并在alternate到达动画结束。animation 我使用速记属性在一行 CSS 中完成所有这些操作。
.fader-slide {\n align-items: center;\n animation: fade-out 2.5s ease-out infinite alternate;\n background: #015e89;\n display: flex;\n height: 100%;\n justify-content: center;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n对于每张单独的幻灯片，我都会为每个后续幻灯片应用属性的animation-delay增加2.5s。显然，您可以将动画持续时间、延迟和计时功能更改为您想要的任何内容。如果您希望每张幻灯片在完全显示后立即开始淡出，那么最好动画持续时间和每个延迟增量彼此相等。对于您想要添加的任何其他幻灯片，您只需将您选择的延迟量添加到先前的延迟量，然后继续增加它即可。我就是这样做的。我将z-index值为 的属性添加1到第一张幻灯片，以便在页面加载后动画开始时它位于其他幻灯片的顶部。否则，DOM 顺序中的最后一张幻灯片将在开始时位于顶部。为了使褪色效果更加明显，我还会更改background-color后续每张幻灯片上的 。
.fader-slide--1 {\n animation-delay: 2.5s;\n z-index: 1;\n}\n\n.fader-slide--2 {\n animation-delay: 5s;\n background-color: #018970;\n}\n这是一个代码笔，因此您可以看到它们一起工作。
\n\n频闪警告：如果您患有癫痫症，或者患有由脉冲光引起的癫痫发作或头痛，您可能需要避免查看此示例。据我估计，效果很轻微，但当您点击上面的链接时，它会自动播放，因此我认为向对此类事情敏感的任何人发出警告是公平的。
\n\n这里将上面的所有 CSS 集中在一个易于复制/粘贴的代码片段中：
\n\n.fader-stage {\n border: 2px solid #000;\n height: 12rem;\n margin: 20px auto;\n position: relative;\n width: 50%;\n}\n\n@keyframes fade-out {\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n.fader-slide {\n align-items: center;\n animation: fade-out 2.5s ease-out infinite alternate;\n background: #015e89;\n display: flex;\n height: 100%;\n justify-content: center;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n.fader-slide--1 {\n animation-delay: 2.5s;\n z-index: 1;\n}\n\n.fader-slide--2 {\n animation-delay: 5s;\n background-color: #018970;\n}\n如果我们继续下去，我们可以用它做更多的事情，但我相信这可以达到我所理解的你的问题中列出的规格。
\n\n如果您不使用Autoprefixr或Prefixfree之类的工具将供应商前缀应用于 CSS，那么您可能需要向属性添加-webkit（可能还有-moz和-ms）前缀animation，以及animation-delay、@keyframes和 可能还有 Flexbox 属性（display: flex、align-items: center和justify-content: center），但前提是您想广泛撒网以实现浏览器向后兼容性。如果您不知道如何执行此操作或不知道我在说什么，请告诉我，我将进行编辑以包含浏览器前缀。
Autoprefixer 还有一个在线工具，用于添加供应商前缀（如果您不想使用PostCSS将其设置为项目的包依赖项）。要使用在线工具，您只需为应用程序提供一个描述您想要定位的浏览器的字符串，粘贴到您的 CSS 中，它就会返回您的 CSS 以及必要的供应商前缀，以（主要）确保符合您添加的目标浏览器。
\n\n如果您对此方法还有任何其他疑问，请告诉我，我很乐意为您提供帮助。\xe2\x80\x8d
\n| 归档时间： |
|
| 查看次数： |
2547 次 |
| 最近记录： |