你的位置:首页 > 网页设计

[网页设计]苹果开关按钮效果


苹果开关按钮效果~~

关闭时                                      开启时 

 

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";    }  }