Javascript combiné avec CSS pour acquérir des compétences en effets spéciaux_javascript sur le bouton de commutation Apple

bouton pomme

           

#div1{
          largeur : 170 px ;
Hauteur : 100 px ;
         rayon de bordure : 50 px ;
position : relative ;
>
​ #div2{
          largeur : 96 px ;
Hauteur : 96 px ;
         rayon de bordure : 48 px ;
position : absolue ;
fond : blanc ;
          box-shadow : 0px 2px 4px rgba(0,0,0,0.4);
>
.open1{
fond : rgba(0,184,0,0.8);
>
.open2{
         haut : 2 px ;
           droite : 1 px ;
>
.close1{
arrière-plan : rgba(255,255,255,0.4);
          bordure : 3px rgba solide (0,0,0,0.15);
         bordure gauche : transparente ;
>
.close2{
          gauche : 0px;
         haut : 0px;
          bordure:2px solid rgba(0,0,0,0.1);
>

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