星空网 > 软件开发 > 网页设计

苹果开关按钮效果

苹果开关按钮效果~~

关闭时                                      开启时 

苹果开关按钮效果苹果开关按钮效果

 

html code

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>apple button</title></head><body>  <div id="div1" class="open1">    <div id="div2" class="open2"></div>  </div></body></html>

css code

#div1{    width: 170px;    height: 100px;    border-radius: 50px;    position: relative;  }  #div2{    width: 96px;    height: 96px;    border-radius: 48px;    position: absolute;    background: white;    box-shadow: 0px 2px 4px rgba(0,0,0,0.4);  }  .open1{    background: rgba(0,184,0,0.8);  }  .open2{    top: 2px;    right: 1px;  }  .close1{    background: rgba(255,255,255,0.4);    border:3px solid rgba(0,0,0,0.15);    border-left: transparent;  }  .close2{    left: 0px;    top: 0px;    border:2px solid rgba(0,0,0,0.1);  }

javascript code

window.onload=function(){    var div2=document.getElementById("div2");    var div1=document.getElementById("div1");    div2.onclick=function(){     div1.className=(div1.className=="close1")?"open1":"close1";     div2.className=(div2.className=="close2")?"open2":"close2";    }  }

 




原标题:苹果开关按钮效果

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流