关于“单选框”的用法

周末闲来无事正在翻看宝贝闺女的照片，突然有人问到 这个单选框怎么实现多个单选框关联实现单选效果，于是脑洞大开准备做个有意思的小东西。

单纯css实现的东西，先看成品！
https://v.youku.com/v_show/id_XNDIzMDYyNDEzNg==.html?spm=a2h3j.8428770.3416059.1

首先找到一张合适的图片作为背景；

1.png

.pingmu{
width: 272px;
height: 185px;
background:red;
position: absolute;
top:205px;
left:152px;
border-radius: 51px;
overflow: hidden;   
}

然后创建一个DIV 尺寸适应电视机屏幕大小 圆角优化效果然后定位到电视机屏幕位置，已当做电视机屏幕插入视频使用；

2.png

现在插入视频。
这里的三个属性值：
1.autoplay：是自动播放的意思；
2.muted：是清除声音的意思；
3.loop:shi 循环播放；

video{
width: 283px;
height: 572px;
position: absolute;
top:-184px;
left:0px;
}

给视频设置大小并且用定位把它送到该有的位置

捕获.PNG

接下来就用到单选框这个东西

单纯加入四个单选框并不能实现单选效果

捕获1.PNG

把需要关联的单选框 给一个同样的 name=" " 就能实现单选效果

捕获2.PNG

接下来把 单选框用 把视频关联起来

 
 
 

     
 
.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

 
    
        关
    

最后给“关”这个按钮一个默认的选中状态。

整个的逻辑就是：
页面打开默认选中“关”按钮，显示关机画面。
选中“开”按钮，视频切换按钮显示显示。
点击切换按钮，视频切换。
点击“关”按钮，视频切换按钮隐藏，显示关机页面。结束！

大神勿喷，此文章仅表示一个新时代码农对女儿的爱！