[英]Pure CSS image slider
<!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>
Hello everybody , i was watching a video on making a CSS image slider after watching the whole video i wrote the above code but am having some problem understanding this particular piece of code: 大家好,观看完整个视频后,我正在观看有关制作CSS图像滑块的视频,但是我在编写上述代码时遇到了一些问题:
[id^= "slide"]:checked + .slide{
left:0;
z-index:100;
transition:left .65s ease-out;
}
I need help understanding this part of the code. 我需要帮助来理解代码的这一部分。 Thank you for help in advance :)
预先感谢您的帮助:)
First off it seems you understand the fundamental principles of CSS but if I am wrong and you do not, I recommend the tutorials of MDN about How CSS works and the Syntax . 首先,您似乎似乎了解CSS的基本原理,但是如果我错了却没有错,我建议MDN关于CSS的工作原理和语法的教程。
So piece by piece... 所以一点一点...
[id^= "slide"]:checked + .slide
[id^= "slide"]:checked + .slide
This is the selector and consists of two major parts: [id^= "slide"]:checked
and .slide
, connected by a +
sign. 这是选择器,由两个主要部分组成:
[id^= "slide"]:checked
和.slide
,由+
号连接。 I assume that you know what .slide
means on its own. 我假设您知道
.slide
是什么意思。 If not, you should read the articles that I posted above. 如果没有,您应该阅读我上面发布的文章。
+
The +
operator with the x + y
syntax selects all elements that would be selected by pure y
but it limits the selection to only those elements directly following other elements which would be selected by x
. 具有
x + y
语法的+
运算符选择将由纯y
选择的所有元素,但将选择范围限制为仅直接位于将由x
选择的其他元素之后的那些元素。 So if you have .a + .b
then you get all elements with the class b
directly preceded by elements with the class a
: 所以,如果你有
.a + .b
那么你得到与类的所有元素b
的元素之前直接与类a
:
div { border: 1px dashed black; padding: 1em; margin: 1em; } .wupwupwup + .nanana { background: red; }
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>
[id^="slide"]:checked
This one again consists of two selectors: [id^="slide"]
and :checked
. 这又由两个选择器组成:
[id^="slide"]
和:checked
。 :checked
is explained very simply: x:checked
selects all elements that match x
as long as they are "checked". :checked
的解释非常简单: x:checked
选择所有与x
匹配的元素,只要它们被“选中”即可。 An element is "checked" for example if it is a checkbox or radio button and is checked. 例如,如果元素是复选框或单选按钮并被选中,则将其“选中”。 So we now need to examine the
x
in this case [id^="slide"]
. 因此,在这种情况下,我们现在需要检查
x
[id^="slide"]
。 That is a selector which selects all elements which have an attribute id
which starts with slide
. 这是一个选择器,用于选择所有具有
id
以slide
开头的属性id
元素。 So it would select all elements with ids like slide
, slide-1-trigger
, slide-2-trigger
, slider
, and so on. 所以它会选择具有类似ID的所有元素
slide
, slide-1-trigger
, slide-2-trigger
, slider
,等等。
So what the whole [id^= "slide"]:checked + .slide
does can be explained like this: It selects all elements with the class slide
that directly follow a "checked" element with an ID that begins with slide
. 那么什么整个
[id^= "slide"]:checked + .slide
确实可以这样解释:它选择与类的所有元素slide
直接跟随一个“选中”与开头的ID元件slide
。
... this means, that for example the element <section class="slide slide-one">
after a checked <input id="slide-1-trigger" type="radio" name="slide" checked>
will be selected. ...这意味着,例如元素
<section class="slide slide-one">
在选中<input id="slide-1-trigger" type="radio" name="slide" checked>
已选择。
{
left:0;
z-index:100;
transition:left .65s ease-out;
}
First off: You can read about transitions on MDN. 首先,您可以阅读有关 MDN 过渡的信息。 What your transition basically does is: Make the change of the property
left
to the value 0
smooth for 0.65
seconds. 你的转变通常做的就是:使属性的改变
left
到值0
光滑的0.65
秒。 While it does this, it subtly uses a special easing function called ease-out
but you can omit that probably without noticeable differences. 在此过程中,它巧妙地使用了一种特殊的缓动功能,称为缓和功能
ease-out
但是您可以忽略它而不会产生明显的差异。 The z-index
of 100
makes this current slide the top-most so that it is not hidden behind the other slides. z-index
为100
,此当前幻灯片位于最上方,因此不会隐藏在其他幻灯片后面。
... that you may have missed: The <label ...>
elements that you use will mark the corresponding <input ...>
elements as checked
if you click on the labels. ...您可能已经错过了:如果单击标签,则使用的
<label ...>
元素会将相应的<input ...>
元素标记为已checked
。 That is why their state changes and then the :checked
selector takes effect. 这就是为什么它们的状态改变,然后
:checked
选择器生效的原因。
:checked
is a CSS pseudo-class selector that represents any radio, checkbox or option that has been checked/clicked. :checked
是一个CSS伪类选择器,它代表已选中/单击的所有单选,复选框或选项。 That segment of CSS is just targeting any id of slide-trigger and performing a transition left when the :checked
pseudo-class is active. CSS的该段仅针对任何滑动触发的id,并在
:checked
伪类处于活动状态时向左执行过渡。 I hope that was helpful 希望对您有所帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.