Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > 苹果开关按钮效果_html/css_WEB-ITnose

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

WBOY
Freigeben： 2016-06-24 11:46:48
Original
1209 Leute haben es durchsucht

苹果开关按钮效果~~

关闭时                                      开启时 

 

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>
Nach dem Login kopieren

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);    }
Nach dem Login kopieren

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";        }    }
Nach dem Login kopieren

 

Verwandte Etiketten：
苹果开关按钮效果
Quelle：php.cn
Vorheriger Artikel：CSS实例练习_html/css_WEB-ITnose Nächster Artikel：CSS(一)_html/css_WEB-ITnose
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Probleme mit jQuery.remove() und array.splice() Ich habe also eine Seite mit einer Artikelliste und einer Einkaufsliste. Wenn Sie x Artike...
Aus 2024-04-04 17:21:35
0
1
347
Erstellen Sie einen Hover-Effekt, der die Menüschaltfläche mit einer schattierten Klonversion in eine X-Form umwandelt Zunächst möchte ich zugeben, dass mein Titel verwirrend ist, und das tut mir leid. Was ich...
Aus 2024-04-04 11:55:21
0
2
315
Problem mit dem unscharfen Übergang des Bodenfilters Durch Drücken der Taste wird der Hintergrund unscharf, aber beim Übergang werden die Kante...
Aus 2024-04-01 23:10:22
0
1
335
Hover-Effekte von den Schaltflächen „Senden' und „Zurücksetzen' entfernen: Schritt-für-Schritt-Anleitung Welchen Befehl muss ich verwenden, damit es nicht skaliert wird, wenn ich auf die Schaltfl...
Aus 2024-04-01 22:32:31
0
1
333
Die Aktivierung der Taste führt zu einer Fehlfunktion des Hover-Effekts Ich habe versucht, die Grundlagen der Webentwicklung (HTML, CSS und JS) zu erlernen, also ...
Aus 2024-04-01 21:51:26
0
1
396
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage