周末闲来无事正在翻看宝贝闺女的照片，突然有人问到 <input type="radio" name="" id=""> 这个单选框怎么实现多个单选框关联实现单选效果，于是脑洞大开准备做个有意思的小东西。
单纯css实现的东西，先看成品！
https://v.youku.com/v_show/id_XNDIzMDYyNDEzNg==.html?spm=a2h3j.8428770.3416059.1
<img src="../timg.jpg" alt="">
首先找到一张合适的图片作为背景；
1.png
<div class="pingmu"></div>
.pingmu{
width: 272px;
height: 185px;
background:red;
position: absolute;
top:205px;
left:152px;
border-radius: 51px;
overflow: hidden;
}
然后创建一个DIV 尺寸适应电视机屏幕大小 圆角优化效果然后定位到电视机屏幕位置，已当做电视机屏幕插入视频使用；
2.png
<video src="../vl/8.mp4"
autoplay="autoplay"
muted="muted"
loop="loop">
现在插入视频。
这里的三个属性值：
1.autoplay：是自动播放的意思；
2.muted：是清除声音的意思；
3.loop:shi 循环播放；
video{
width: 283px;
height: 572px;
position: absolute;
top:-184px;
left:0px;
}
给视频设置大小并且用定位把它送到该有的位置
接下来就用到单选框这个东西
<input type="radio" name="" id="">
<input type="radio" name="" id="">
<input type="radio" name="" id="" >
<input type="radio" name="" id="" >
单纯加入四个单选框并不能实现单选效果
捕获1.PNG
把需要关联的单选框 给一个同样的 name=" " 就能实现单选效果
接下来把 单选框用 <label for=""></label> 把视频关联起来
<input type="radio" name="a" id="h">
<label for="h" class="k-4"></label>
<div class="video-4 pingmu">
<video src="../vl/3.mp4"
autoplay="autoplay"
muted="muted"
loop="loop">
</div>
.k-4{
width: 28px;
height: 28px;
background:rgb(73, 252, 73);
position: absolute;
top:434px;
left:319.5px;
border-radius: 15px;
display: none;
box-shadow:inset 0px 0px 12px 3px #ccc;
}
label 里面的for=“” 里面的值对应的是 input 里面的 id 名
这样就可以把label 和单选框绑定在一起 后面的 checked属性值就可以直接点选 lable 里面的内容
我这里直接把 label 做成了按钮的样式
捕获3.PNG
然后分别写出四个按钮的样式 并且用定位把彼此的位置定好
微信图片_20190616200436.png
下面就是关于思路的描述 图片不太容易展示：
：checked
#x:checked~.video-1{
display: block;
}
点选黄色图标 关联id名为“x”的单选按钮--id名为“x”的单选按钮选中状态下 第一个视频文件 dissplay：block； （显示）
依次类推写完四个；
因为四个单选标签为同一个name值 所以选中其他的标签 另外四个默认为不选中状态，所以每次值显示一段视频；
然后再写两个按钮用作电源开关；（关于按钮样式写法不在赘述）
微信图片_20190616201934.png
现在把上面的那几个按钮全部隐藏；
用上面的写法 让 “开”的那个单选框选中时上面的隐藏起来的按钮显示，那么反过来 “开” 的这个按钮不被选中的状态 切换视频的那几个按钮就会被隐藏。
然后“关”的那个按钮选中状态下会显示另外一个关机状态的图层；
微信图片_20190616202537.png
<input type="radio" name="b" id="p-c" checked>
<label for="p-c" class="power-c">
关
</label>
最后给“关”这个按钮一个默认的选中状态。
整个的逻辑就是：
页面打开默认选中“关”按钮，显示关机画面。
选中“开”按钮，视频切换按钮显示显示。
点击切换按钮，视频切换。
点击“关”按钮，视频切换按钮隐藏，显示关机页面。结束！
大神勿喷，此文章仅表示一个新时代码农对女儿的爱！
