我正在寻找一种更优雅的方式来完成某事。
我在 html 页面上有 5 张幻灯片。每张幻灯片都是一个包含一些内容的 div，以及一个引用上一张和下一张幻灯片的后退和下一张锚标签。幻灯片正常定位，即静态定位。没有特殊定位，但我使用 css 动画来淡入和淡出幻灯片。
这是片段：
div.slide,
div.intro {
max-width 200px;
height: 200px;
margin 1em auto;
padding 1em;
text-align left;
background: yellow;
}
div.slide { display: none; }
div.slide:target ~ div.intro { display: none; }
div.intro:target,
div.slide:target {
display: block;
animation: slidein 1s forwards;
}
@keyframes slidein {
0% { opacity: 0; display: block; }
1% { opacity: 0; }
100% { opacity: 1; }
}
div.intro a { margin-left: 2.35em; } <div class="slide" id="slide-2">
<h1>Two</h1>
<a href="#slide-1">Back</a>
<a href="#slide-3">Next</a>
</div>
<div class="slide" id="slide-3">
<h1>Three</h1>
<a href="#slide-2">Back</a>
<a href="#slide-4">Next</a>
</div>
<div class="slide" id="slide-4">
<h1>Four</h1>
<a href="#slide-3">Back</a>
<a href="#slide-5">Next</a>
</div>
<div class="slide" id="slide-5">
<h1>Five</h1>
<a href="#slide-4">Back</a>
</div>
<div class="intro" id="slide-1">
<h1>One</h1>
<a href="#slide-2">Next</a>
</div>您应该能够单击“下一步”和“返回”并浏览所有幻灯片，而不会显示任何内容都会中断淡入淡出不透明度太差，但重要的是，不要显示内容将页面的高度保持为当前幻灯片的高度。
起初，我对所有幻灯片都进行了相同的处理，但存在 URL 问题。如果页面在 URL 中没有 #slide-1 的情况下加载，则会中断。即使没有#slide-1，我也需要 URL 来加载介绍幻灯片。CSS 实现了这一点，但只能使用一般的兄弟选择器，并将介绍幻灯片放在 HTML 的最后，这很糟糕。
有没有办法在不弄乱 HTML 中的顺序的情况下完成同样的事情。
想法？
我有一个纯粹的CSS答案，它满足您的所有标准。
HTML，将ids移动到幻灯片内容上方intro-slide默认情况下，设置为display: blockintro-slide#slide-1:target~.slide-1
完整代码：
.slide {
max-width: 200px;
height: 200px;
margin: 1em auto;
padding: 1em;
text-align: left;
background: yellow;
display: none;
}
:target~.intro-slide {
display: none;
}
.intro-slide,
#slide-1:target~.slide-1,
#slide-2:target~.slide-2,
#slide-3:target~.slide-3,
#slide-4:target~.slide-4,
#slide-5:target~.slide-5 {
display: block;
animation: slidein 1s forwards;
}
@keyframes slidein {
0% {
opacity: 0;
display: block;
}
1% {
opacity: 0;
}
100% {
opacity: 1;
}
}
div.intro-slide a {
margin-left: 2.35em;
}<div id="slide-1"></div>
<div id="slide-2"></div>
<div id="slide-3"></div>
<div id="slide-4"></div>
<div id="slide-5"></div>
<div class="slide slide-1 intro-slide">
<h1>One</h1>
<a href="#slide-2">Next</a>
</div>
<div class="slide slide-2">
<h1>Two</h1>
<a href="#slide-1">Back</a>
<a href="#slide-3">Next</a>
</div>
<div class="slide slide-3">
<h1>Three</h1>
<a href="#slide-2">Back</a>
<a href="#slide-4">Next</a>
</div>
<div class="slide slide-4">
<h1>Four</h1>
<a href="#slide-3">Back</a>
<a href="#slide-5">Next</a>
</div>
<div class="slide slide-5">
<h1>Five</h1>
<a href="#slide-4">Back</a>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句