应用纯css完成电源开关实际效果

日期：2020-12-12 类型：科技新闻 

关键词：免费自助建站，手机建站平台，wap建站，免费自助建站平台，H5网站,H5模板建站

最先是构思

大家应用<input type="checkbox">标识来完成这个实际效果。

checkbox的选定、未选定的特点，恰好对应电源开关的开启、关掉

on:开启 off:关掉

<label for="ck2">
  <input type="checkbox" id="ck2">
  <span>未选定，则关掉电源开关</span>
</label>
<br>
<label for="ck1">
  <input type="checkbox" id="ck1" checked>
  <span>选定，则开启电源开关</span>
</label>

刚开始画出off、on情况的草图

这里要解读1下，应用了position来完成的精准定位。有不上解的同学能够开启MDN查询有关专业知识

<P>off情况草图</P>
<div class="toggle">
  <div class="cookie"></div>
</div>
<br>
<P>on情况草图</P>
<div class="toggle2">
  <div class="cookie2"></div>
</div>
.toggle{
  display:inline-block;
  position:relative;
  height:25px;
  width:50px;  
  border-radius:4px;
  background:#CC0000;
}
.cookie{
  position:absolute;
  left:2px;
  top:2px;
  bottom:2px;
  width:50%;
  background:rgba(230,230,230,0.9);
  border-radius:3px;
}
.toggle2{
  display:inline-block;
  position:relative;
  height:25px;
  width:50px; 
  padding:2px;
  border-radius:4px;
  background:#66CC33;  
}
.cookie2{
  position:absolute;
  right:2px;
  top:2px;
  bottom:2px;  
  width:50%;
  background:rgba(230,230,230,0.9);
  border-radius:3px;
}

随后大家将这两个草图放到label内
 

<label for="ck4">
  <input type="checkbox" id="ck4">
  <div class="toggle">
    <div class="cookie"></div>
  </div>
</label>
<br>
<label for="ck3">
  <input type="checkbox" id="ck3" checked>
  <div class="toggle2">
    <div class="cookie2"></div>
  </div>
</label>

融合label和checkbox梳理、提升css

<label for="ck5">
  <input type="checkbox" id="ck5">
  <div class="toggle-finish">
    <div class="cookie-finish"></div>
  </div>
</label>
<br>
<label for="ck6">
  <input type="checkbox" id="ck6" checked>
  <div class="toggle-finish">
    <div class="cookie-finish"></div>
  </div>
</label>
.toggle-finish{
  cursor:pointer;
  display:inline-block;
  position:relative;
  height:25px;
  width:50px;  
  border-radius:4px;
  background:#CC0000;
}
.cookie-finish{
  position:absolute;
  left:2px;
  top:2px;
  bottom:2px;
  width:50%;
  background:rgba(230,230,230,0.9);
  border-radius:3px;
}
input:checked + .toggle-finish{
  background:#66CC33;  
}
input:checked + .toggle-finish .cookie-finish{ 
  left:auto;
  right:2px;
}

到此为止就早已基础完成1个电源开关的作用了，记得将input掩藏起来哦

能够点一下预览 https://codepen.io/Ritr/pen/W...

此外我还提升了1个动漫版

https://codepen.io/Ritr/pen/L...

总结

以上所述是网编给大伙儿详细介绍的应用纯css完成电源开关实际效果,期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！

上一篇：CSS 完成渐变色实际效果小结( linear 返回下一篇：css3的动漫殊效之动漫编码序列（animation）