纯CSS图像滑块

时间：2017-05-06 11:29:51

标签： html css 

<!DOCTYPE html>
<html>
<head>
<style>
html,body{
height:100%;
width:100%;
margin:0%;
Padding:0%;
}
.wrap{
height:100%;
width:100%;
position:relative;
overflow:hidden;
background:#120103;
color:#fff;
text-align:center;
}
header{
    background:#3E474F;
    box-shadow:0 .5em 1em #111;
    position:absolute;
    z-index:900;
    width:100%;
}
header label{
    color:#788188;
    cursor:pointer;
    display:inline-block;
    line-height:4.25em;
    font-size:.667em;
    font-weight:bold;
    padding:0 1em;
}
header label:hover{
    background:#2e353b;
}

.slide{
    width:100%;
    height:100%;
    position:absolute;
    top:0%;
    left:100%;
    z-index:10;
    padding:8em 1em 0;
    background-color:#120103;
    background-position:50% 50%;
    background-size:cover;
    transition:left 0s .75s;
}


[id^= "slide"]:checked + .slide{
    left:0;
    z-index:100;
    transition:left .65s ease-out;
}

 img{
     height:250px;
     width:250px;
    Margin:20px;
    Overflow:none;
    display:block;
    }
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}

.slide-one:hover .overlay{
opacity:0.5;
}

.slide-two:hover .overlay{
opacity:0.5;
}

.slide-three:hover .overlay{
opacity:0.5;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slide-one{
background-image:url('wow.jpg');
}
.slide-two{
background-image:url('Anonymous.jpg ');
}
.slide-three{
background-image:url('1.jpg');
}
</style>
</head>
<body>
<div class="wrap">
<header>
<label for="slide-1-trigger">Slide One</label>
<label for="slide-2-trigger">Slide Two</label>
<label for="slide-3-trigger">Slide Three</label>
</header>
<input id="slide-1-trigger" type="radio" name="slide" checked>
<section class="slide slide-one">

<div class="overlay">
<div class="text">Ethical Hacking is licensed hacking.... <a 
href="https://en.wikipedia.org/wiki/Certified_Ethical_Hacker">Read More</a>
</div>
</div>
</section>
<input id="slide-2-trigger" type="radio" name="slide" >
<section class="slide slide-two" >
<div class='overlay'>
<div class="text">A rather famous group of hackers and tech savvys spread 
across the world....<a 
href="https://en.wikipedia.org/wiki/Anonymous_(group)">Read More</a></div>
</div>
</section>
<input id="slide-3-trigger" type="radio" name="slide" >
<section class="slide slide-three" >
<div class='overlay'>
<div class="text">Just Checking</div>
</div>
</div>
</body>
</html>

各位大家好，我正在观看一个关于制作CSS图像滑块的视频，看完整个视频后我编写了上面的代码，但是在理解这段特殊代码时遇到了一些问题：

[id^= "slide"]:checked + .slide{
    left:0;
    z-index:100;
    transition:left .65s ease-out;
}

我需要帮助理解这部分代码。提前感谢您的帮助：）

2 个答案:

答案 0 :(得分：1)

首先，您似乎了解CSS的基本原则，但如果我错了而您没有，我推荐MDN关于How CSS works和Syntax的教程。

所以一块一块地......

1。 [id^= "slide"]:checked + .slide

这是选择器，由两个主要部分组成：[id^= "slide"]:checked和.slide，由+符号连接。我假设你知道.slide本身意味着什么。如果没有，你应该阅读我上面发布的文章。

1.1。 +

具有+语法的x + y运算符会选择纯y选择的所有元素，但它会将选择限制为仅直接跟随其他元素的元素。 x。因此，如果您有.a + .b，那么您将获得类b的所有元素，其前面是带有类a的元素：

＆＃13;
＆＃13; 
div {
  border: 1px dashed black;
  padding: 1em;
  margin: 1em;
}

.wupwupwup + .nanana {
  background: red;
}
＆＃13; 
This selects all .nanana directly after .wupwupwup.
<div class="nanana wupwupwup">This is not selected because there is no .wupwupwup before.</div>
<div class="wupwupwup">This is not selected because it has no .nanana class</div>
<div class="nanana">This is selected because it has .wupwupwup before and itself matches .nanana</div>
<div>This is not selected because it does not match .nanana and also because the previous element does not match .wupwupwup</div>
＆＃13;
＆＃13;
＆＃13;

1.2。 [id^="slide"]:checked

这个又包含两个选择器：[id^="slide"]和:checked。 :checked的解释非常简单：x:checked选择匹配x的所有元素，只要它们被＆＃34;检查＆＃34;。一个元素被检查＆＃34;例如，如果它是一个复选框或单选按钮并被选中。因此，我们现在需要检查x在这种情况下[id^="slide"]。这是一个选择器，它选择具有以id开头的属性slide的所有元素。因此，它会选择包含slide，slide-1-trigger，slide-2-trigger，slider等ID的所有元素。

所以整个[id^= "slide"]:checked + .slide的作用可以这样解释：它选择所有直接跟随＆＃34;检查＆＃34;的类slide的元素。 ID以slide开头的元素。

在你的情况下......

...这意味着，例如，选中<section class="slide slide-one">后的元素<input id="slide-1-trigger" type="radio" name="slide" checked>将被选中。

2。规则

{
    left:0;
    z-index:100;
    transition:left .65s ease-out;
}

首先关闭：您可以在MDN上read about transitions。 您的转换基本上是：将属性left的值更改为0秒的值0.65。虽然它这样做，它巧妙地使用一个名为ease-out的特殊缓动函数，但你可以省略它，可能没有明显的差异。 z-index的{​​{1}}使此当前幻灯片位于最顶层，因此不会隐藏在其他幻灯片后面。

另一件事......

...您可能错过了：如果您点击标签，则您使用的100元素会将相应的<label ...>元素标记为<input ...>。这就是他们状态发生变化然后checked选择器生效的原因。

答案 1 :(得分：0)

:checked是一个CSS伪类选择器，表示已经选中/单击的任何广播，复选框或选项。 CSS的那一部分只是针对任何滑动触发器ID，并在:checked伪类处于活动状态时执行转换。我希望这很有帮助

相关问题
最新问题