Javascript combined with CSS to achieve Apple switch button special effects_javascript skills

Apple switch button effect~~

When turning on,

html

Copy code The code is as follows:

           

css

Copy code The code is as follows:

#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

Copy code The code is as follows:

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

The above is the entire content of this article. I hope it will be helpful to everyone in mastering the front-end design of WEB.