CSS3 simuliert den IOS-Schiebeschaltereffekt
Jan 22, 2017 pm 05:30 PMVorwort
Die H5-Site benötigt den Effekt der IOS-Schiebetaste. Nachdem ich darüber nachgedacht habe, scheint es, dass CSS3 möglich ist, also habe ich damit herumgespielt ... Es ist ganz einfach. Bitte siehe Kommentar
Effekt
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3模拟IOS开关</title>
<style type="text/css" media="screen">
/* ==========================================================================
设置根元素字体大小
========================================================================== */
html {
font-size: 100px;
}
/* ==========================================================================
设置模拟元素的包裹层,装饰...毫无卵用
========================================================================== */
.ios-checkbox{
height:4rem;
width:4rem;
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
border:.05rem dashed #3DB7A9;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
-webkit-flex-wrap:nowrap;
-ms-flex-wrap:nowrap;
flex-wrap:nowrap;
-webkit-justify-content:space-around;
-ms-flex-pack:distribute;
justify-content:space-around;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
}
/* ==========================================================================
label标签模拟按钮
========================================================================== */
.emulate-ios-button {
display: block;
width: 2rem;
height: 1rem;
background: #ccc;
border-radius: 5rem;
cursor: pointer;
position: relative;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
/* ==========================================================================
设置伪类,来实现模拟滑块滑动,过渡用了transition来实现 ,
translateZ来强制启用硬件渲染
========================================================================== */
.emulate-ios-button:after {
content: '';
display: block;
width: .9rem;
height: .9rem;
border-radius: 100%;
background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
position: absolute;
left: .05rem;
top: .05rem;
-webkit-transform:translateZ(0);
transform:translateZ(0);
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.emulate-ios-button:active:after {
width: 1.1rem;
}
/* ==========================================================================
设置raw-checkbox,视觉直观比较
========================================================================== */
.raw-checkbox{
height:2rem;
width:2rem;
}
.raw-checkbox:checked+label {
background: #34bf49;
}
/* 这里是伪元素偏移,初始是0.9+0.05 ,所以这里1.05rem */
.raw-checkbox:checked+label:after {
left: 1.05rem;
}
.raw-checkbox:checked+label:active:after {
left: .5rem;
}
.raw-checkbox:disabled+label {
background: #d5d5d5;
pointer-events: none;
}
.raw-checkbox:disabled+label:after {
background: #bcbdbc;
}
</style>
</head>
<body>
<div>
<input type="checkbox" id="ios-checkbox" name="emulate-ios-button">
<label for="ios-checkbox"></label>
</div>
</body>
</html>Zusammenfassung
Für einen intuitiveren Vergleich habe ich Das Raw-Kontrollkästchen wurde nicht ausgeblendet.
Das Obige ist die CSS3-Simulation des IOS-Schiebeschaltereffekts. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!
Heißer Artikel
Hot-Tools-Tags
Heißer Artikel
Heiße Artikel -Tags
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Die erste Version von Apples iOS 18 wies zahlreiche Fehler auf: schweres Fieber, WeChat-Verzögerung
Jun 13, 2024 pm 09:39 PM
Die erste Version von Apples iOS 18 wies zahlreiche Fehler auf: schweres Fieber, WeChat-Verzögerung
Apple veröffentlicht Open-Source-Swift-Paket für homomorphe Verschlüsselung, bereitgestellt in iOS 18
Jul 31, 2024 pm 01:10 PM
Apple veröffentlicht Open-Source-Swift-Paket für homomorphe Verschlüsselung, bereitgestellt in iOS 18
Apple veröffentlicht das iOS/iPadOS 18 Beta 4-Update erneut, die Versionsnummer wurde auf 22A5316k erhöht
Jul 27, 2024 am 11:06 AM
Apple veröffentlicht das iOS/iPadOS 18 Beta 4-Update erneut, die Versionsnummer wurde auf 22A5316k erhöht
Aktualisieren | Hacker erklärt, wie man Epic Games Store und Fortnite auf dem iPad außerhalb der EU installiert
Aug 18, 2024 am 06:34 AM
Aktualisieren | Hacker erklärt, wie man Epic Games Store und Fortnite auf dem iPad außerhalb der EU installiert
Neue Funktionen von Apples iOS 18 „Boundless Notes'-App: erweiterte Szenenfunktionalität, Einführung der Rasterausrichtung
Jun 02, 2024 pm 05:05 PM
Neue Funktionen von Apples iOS 18 „Boundless Notes'-App: erweiterte Szenenfunktionalität, Einführung der Rasterausrichtung
Sollte iPhone12 ios16 auf ios17.5beta3 aktualisiert werden? Wie ist die Erfahrung mit ios17.5beta3?
Apr 25, 2024 pm 04:52 PM
Sollte iPhone12 ios16 auf ios17.5beta3 aktualisiert werden? Wie ist die Erfahrung mit ios17.5beta3?
Apple iOS/iPadOS 18 Developer Preview Beta 4 veröffentlicht: CarPlay-Hintergrundbilder hinzugefügt, Einstellungsoptionen sortiert, verbesserte Kamerasteuerung
Jul 24, 2024 am 09:54 AM
Apple iOS/iPadOS 18 Developer Preview Beta 4 veröffentlicht: CarPlay-Hintergrundbilder hinzugefügt, Einstellungsoptionen sortiert, verbesserte Kamerasteuerung
Apple veröffentlicht Updates für iOS/iPadOS 16.7.9 und 15.8.3 für ältere iPhones/iPads: Behebung von Sicherheitslücken
Jul 30, 2024 am 10:13 AM
Apple veröffentlicht Updates für iOS/iPadOS 16.7.9 und 15.8.3 für ältere iPhones/iPads: Behebung von Sicherheitslücken
