communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > 苹果开关按钮效果_html/css_WEB-ITnose

苹果开关按钮效果_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 11:46:48
original
1209 Les gens l'ont consulté

苹果开关按钮效果~~

关闭时                                      开启时 

 

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>
Copier après la connexion

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);    }
Copier après la connexion

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";        }    }
Copier après la connexion

 

Étiquettes associées：
苹果开关按钮效果
source：php.cn
Article précédent：CSS实例练习_html/css_WEB-ITnose Article suivant：CSS(一)_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Problèmes jQuery.remove() et array.splice() J'ai donc une page qui contient une liste d'articles et une liste de courses. Si vous ajou...
Depuis 2024-04-04 17:21:35
0
1
347
Créez un effet de survol qui transforme le bouton de menu en forme de X avec une version clone ombré Tout d'abord, je tiens à admettre que mon titre prête à confusion et j'en suis désolé. Ce ...
Depuis 2024-04-04 11:55:21
0
2
315
Problème de transition de flou du filtre au sol Appuyer sur le bouton rend l'arrière-plan flou, mais lors de la transition, les bords du d...
Depuis 2024-04-01 23:10:22
0
1
335
Supprimer les effets de survol des boutons d'envoi et de réinitialisation : guide étape par étape Quelle commande dois-je utiliser pour qu'elle ne soit pas mise à l'échelle lorsque je cliq...
Depuis 2024-04-01 22:32:31
0
1
333
L'activation du bouton provoque un dysfonctionnement de l'effet de survol J'ai essayé d'apprendre les bases du développement Web (HTML, CSS et JS), j'ai donc essayé...
Depuis 2024-04-01 21:51:26
0
1
396
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal