Pure CSS (3) Image slider
方光华
源案例在线预览
Code & 演示原地址： 链接代码复现（有修改）
CSS
<style>
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
input {
display: none;
}
ul {
list-style: none;
}
.slides {
padding: 0;
width: 800px;
height: 500px;
display: block;
margin: 0 auto;
position: relative;
}
.slide {
width: 800px;
height: 500px;
display: block;
position: absolute;
opacity: 0;
transform: scale(0);
transition: all .7s ease-in-out;
}
.slide img {
width: 100%;
height: 100%;
}
.prev, .next {
width: 200px;
height: 500px;
display: none;
position: absolute;
top: 0;
z-index: 10;
opacity: 0;
cursor: pointer;
transition: all .2s linear;
text-align: center;
line-height: 500px;
color: #ffffff;
font-size: 150px;
text-shadow: 0 0 15px rgb(119 119 119);
background-color: rgba(255, 255, 255, .3);
}
.prev {
left: 0;
}
.next {
right: 0;
}
.prev:hover, .next:hover {
opacity: 1;
}
.slide:hover ~ .prev, .slide:hover ~ .next {
opacity: 0.5;
}
input:checked + .slide_container .slide {
transform: scale(1);
opacity: 1;
transition: opacity 1s ease-in-out;
}
input:checked + .slide_container .prev, input:checked + .slide_container .next {
display: block;
}
.nav_dots {
position: absolute;
bottom: 20px;
left: 380px;
}
.nav_dot {
width: 10px;
height: 10px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 5px;
display: inline-block;
}
.nav_dot:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
}
input#img-1:checked ~ .nav_dots > label#img-1-dot,
input#img-2:checked ~ .nav_dots > label#img-2-dot,
input#img-3:checked ~ .nav_dots > label#img-3-dot {
background-color: rgba(0, 0, 0, 0.8);
}
</style>
Html
<body>
<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked>
<li class="slide_container">
<div class="slide">
<img src="https://img1.baidu.com/it/u=2365285587,1481932959&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
</div>
<label for="img-3" class="prev"><</label>
<label for="img-2" class="next">></label>
</li>
<input type="radio" name="radio-btn" id="img-2">
<li class="slide_container">
<div class="slide">
<img src="https://img1.baidu.com/it/u=3677912229,40698883&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576">
</div>
<label for="img-1" class="prev"><</label>
<label for="img-3" class="next">></label>
</li>
<input type="radio" name="radio-btn" id="img-3">
<li class="slide_container">
<div class="slide">
<img src="https://img2.baidu.com/it/u=1572613686,938558453&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=400">
</div>
<label for="img-2" class="prev"><</label>
<label for="img-1" class="next">></label>
</li>
<li class="nav_dots">
<label for="img-1" class="nav_dot" id="img-1-dot"></label>
<label for="img-2" class="nav_dot" id="img-2-dot"></label>
<label for="img-3" class="nav_dot" id="img-3-dot"></label>
</li>
</ul>
</body>
通过案例学习到的新知识
选择器（总结）
- 兄弟选择器：同层级元素的选中。
1. + ：div+p，div元素后的首个相邻元素必须为p元素，才能命中该元素p。即之间不能存有其他同级兄弟元素。
2. ~ ：div~p，div元素后的所有同级的兄弟元素p，不包括div元素前的p元素。（忽视是否相邻） - 后代选择器：子级元素的选中
1. > ：div > p，div下的第一层子元素中所有子元素p
2. 空格 ：div p，div下的所有子元素p（忽视层级） - AND选择器：例：.class1.class2，则同时具有两个class类名的元素. 例：input#id，input类型的具有该id值的元素
零散知识点
- 标签display: none后，元素不占位存在。依旧可以对元素进行操作，如监听input元素的是否被选中(伪类选择器:checked)
- text-shadow可选属性值
- h-shadow，必需。阴影出现的水平位置。允许负值。
- v-shadow，必需。阴影出现的垂直位置。允许负值。
- blur，可选。模糊的距离。(模糊程度，值越大越模糊)
- color，可选。阴影的颜色。
- scale(val): scale函数可以传递一个单值来同时表明x & y轴的缩放程度。例如: scale(0) 意味着元素宽高为0。scale(1) 意味着元素宽高不变。可以配合使用来模拟opacity: 0 / 1，这样的功效。但是需要注意，当scale(0)后，依然会占用原空间。
- position定位时的元素覆盖：若同一区域出现了元素重叠，后出现的元素的z-index永远大于前面的元素。不会因为元素的position的值(absolute/relative)而导致z-index提高。
label标签的for属性（重点）
语义不复杂，难在于如何有效应用。
如在Pure CSS (1) 中的汉堡折叠菜单，利用了复选框的checked伪类选择器实现菜单的折叠。
本案例中，频繁使用了单选框的checked伪类选择器 配合 lable标签的for属性，实现点击按钮切换图片与点击底部nav_dot切换对应的图片。作者设计的非常巧妙，值的学习。
类似资料：