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

Effet de bouton de commutation Apple~~

Lors de l'allumage,

html

Copier le code Le code est le suivant :

bouton pomme

           

css

Copier le code Le code est le suivant :

#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);
>

javascript

Copier le code Le code est le suivant :

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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde pour maîtriser la conception front-end du WEB.