css:input:radio单选框实现图片手风琴
最终实现效果
![最终实现效果](https://i-blog.csdnimg.cn/blog_migrate/a6248b44a6e0c37e4c16259412dec90a.gif)
源码
<div class="wrap">
<input type="radio" name="a" id="i1" checked>
<label for="i1" class="lab lab1">O N E</label>
<div class="box">
<div class="zp"><img src="01.jpg" alt=""></div>
</div>
<input type="radio" name="a" id="i2">
<label for="i2" class="lab lab2">T O W</label>
<div class="box">
<div class="zp"><img src="02.jpg" alt=""></div>
</div>
<input type="radio" name="a" id="i3">
<label for="i3" class="lab lab3"><Table>T H R E E</Table></label>
<div class="box">
<div class="zp"><img src="03.jpg" alt=""></div>
</div>
<input type="radio" name="a" id="i4">
<label for="i4" class="lab lab4">F O U R</label>
<div class="box">
<div class="zp"><img src="03.jpg" alt=""></div>
</div>
</div>
<style>
body{
background-color: #400b4f;
}
.wrap{
width: 530px;
overflow: hidden;
margin: 0 auto;
margin-top: 100px;
}
.lab{
display: block;
width: 50px;
height: 500px;
border-radius: 25px;
color: #fff;
font-size: 12px;
text-align: center;
padding-top: 64px;
box-sizing: border-box;
padding-left: 19px;
padding-right: 19px;
line-height: 40px;
font-weight: bold;
background-color: #ff00fe;
margin-right: 10px;
float: left;
}
.box{
display: block;
width: 0;
height: 500px;
float: left;
background-color: #a085a7;
border-radius: 25px;
overflow: hidden;
transition: 0.5s;
}
.zp{
width: 210px;
height: 292px;
box-sizing: border-box;
margin-top: 100px;
margin-left: 36px;
border: 5px solid #fff;
}
.zp img{
width: 100%;
height: 100%;
}
input:checked +.lab +.box{
width: 282px;
margin: 0 5px 0 5px;
}
input:checked +.lab{
margin: 0;
background-color: #ffcc33;
}
input{
display: none;
}
</style>
事项
- input:radio 属性值——单选框
radio包含有name、value、checked等属性,要实现单选功能,必须要使得众多radio单选框在同一个group(组)中,也就是radio的name属性值必须相同,必须保证在同一组才可以实现单选功能,这是前提! - label标签——标签为 input 元素定义标注(标记)。(可以让input处于获取焦点或选中状)
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控 件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
- display属性
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。 - ‘+’相邻兄弟选择器
相邻兄弟元素选择器可以选择到紧接着该元素后的相邻元素。(而这应为相同父元素)
例:选择到p元素后的span元素,且二者在同一父元素下,即为p元素的下一个相邻兄弟元素
p+span{属性:属性值;} - checked 选择器
选取所有选中的复选框或单选按钮。