Heim > Artikel > Web-Frontend > CSS3-Implementierung des Beispielcodes für benutzerdefinierte Checkbox-Spezialeffekte

CSS3-Implementierung des Beispielcodes für benutzerdefinierte Checkbox-Spezialeffekte

巴扎黑Original: 2017-05-14 13:36:421469Durchsuche

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zur Verwendung von CSS3 zum Implementieren benutzerdefinierter Checkbox-Spezialeffekte ein. Der Artikel enthält einen vollständigen Beispielcode für Ihre Referenz und Ihr Studium Fühlen Sie sich interessierte Freunde, kommen Sie bitte vorbei und schauen Sie sich unten um.

Vorwort

Jeder weiß, dass CheckBox eine Methode in HTML ist, die es Benutzern ermöglicht, mit Materialien auf der Homepage zu interagieren. Das sogenannte CheckBox-Steuerelement ist das, was wir im Allgemeinen als Kontrollkästchen bezeichnen und das normalerweise zum Aktivieren oder Deaktivieren einer Option verwendet wird. Vor kurzem musste ich den Kontrollkästchenstil anpassen, also dachte ich daran, ihn mit allen zu teilen, die ihn brauchen, und ihn einfach mal ausprobieren . Lassen Sie es uns im Detail vorstellen.

Das Rendering ist wie folgt

Beispielcode

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS3自定义Checkbox特效</title>
</head>
<style type="text/css">
.tgl{display:none}
.tgl,.tgl *,.tgl :after,.tgl :before,.tgl+.tgl-btn,.tgl:after,.tgl:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.tgl ::-moz-selection,.tgl :after::-moz-selection,.tgl :before::-moz-selection,.tgl+.tgl-btn::-moz-selection,.tgl::-moz-selection,.tgl:after::-moz-selection,.tgl:before::-moz-selection{background:0 0}
.tgl ::selection,.tgl :after::selection,.tgl :before::selection,.tgl+.tgl-btn::selection,.tgl::selection,.tgl:after::selection,.tgl:before::selection{background:0 0}
.tgl+.tgl-btn{outline:0;display:block;width:4em;height:2em;position:relative;cursor:pointer}
.tgl+.tgl-btn:after,.tgl+.tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}
.tgl+.tgl-btn:after{left:0}
.tgl+.tgl-btn:before{display:none}
.tgl:checked+.tgl-btn:after{left:50%}


.tgl-light+.tgl-btn{background:#f0f0f0;border-radius:2em;padding:2px;-webkit-transition:all .4s ease;transition:all .4s ease}
.tgl-light+.tgl-btn:after{border-radius:50%;background:#fff;-webkit-transition:all .2s ease;transition:all .2s ease}
.tgl-light:checked+.tgl-btn{background:#9FD6AE}


.tgl-ios+.tgl-btn{background:#fbfbfb;border-radius:2em;padding:2px;-webkit-transition:all .4s ease;transition:all .4s ease;border:1px solid #e8eae9}
.tgl-ios+.tgl-btn:after{border-radius:2em;background:#fbfbfb;-webkit-transition:left .3s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease;transition:left .3s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 rgba(0,0,0,.08);box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 rgba(0,0,0,.08)}
.tgl-ios+.tgl-btn:active{-webkit-box-shadow:inset 0 0 0 2em #e8eae9;box-shadow:inset 0 0 0 2em #e8eae9}
.tgl-ios+.tgl-btn:active:after{padding-right:.8em}
.tgl-ios:checked+.tgl-btn{background:#86d993}
.tgl-ios:checked+.tgl-btn:active{-webkit-box-shadow:none;box-shadow:none}
.tgl-ios:checked+.tgl-btn:active:after{margin-left:-.8em}


.tgl-skewed+.tgl-btn{overflow:hidden;-webkit-transform:skew(-10deg);-ms-transform:skew(-10deg);transform:skew(-10deg);-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;background:#888}
.tgl-skewed+.tgl-btn:after,.tgl-skewed+.tgl-btn:before{-webkit-transform:skew(10deg);-ms-transform:skew(10deg);transform:skew(10deg);display:inline-block;-webkit-transition:all .2s ease;transition:all .2s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.tgl-skewed+.tgl-btn:after{left:100%;content:attr(data-tg-on)}
.tgl-skewed+.tgl-btn:before{left:0;content:attr(data-tg-off)}
.tgl-skewed+.tgl-btn:active{background:#888}
.tgl-skewed+.tgl-btn:active:before{left:-10%}
.tgl-skewed:checked+.tgl-btn{background:#86d993}
.tgl-skewed:checked+.tgl-btn:before{left:-100%}
.tgl-skewed:checked+.tgl-btn:after{left:0}
.tgl-skewed:checked+.tgl-btn:active:after{left:10%}


.tgl-flat+.tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;background:#fff;border:4px solid #f2f2f2;border-radius:2em}
.tgl-flat+.tgl-btn:after{-webkit-transition:all .2s ease;transition:all .2s ease;background:#f2f2f2;content:"";border-radius:1em}
.tgl-flat:checked+.tgl-btn{border:4px solid #7FC6A6}
.tgl-flat:checked+.tgl-btn:after{left:50%;background:#7FC6A6}


.tgl-flip+.tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;-webkit-perspective:100px;-ms-perspective:100px;perspective:100px}
.tgl-flip+.tgl-btn:after,.tgl-flip+.tgl-btn:before{display:inline-block;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;position:absolute;top:0;left:0;-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;border-radius:4px}
.tgl-flip+.tgl-btn:after{content:attr(data-tg-on);background:#02C66F;-webkit-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg)}
.tgl-flip+.tgl-btn:before{background:#FF3A19;content:attr(data-tg-off)}
.tgl-flip+.tgl-btn:active:before{-webkit-transform:rotateY(-20deg);-ms-transform:rotateY(-20deg);transform:rotateY(-20deg)}
.tgl-flip:checked+.tgl-btn:before{-webkit-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg)}
.tgl-flip:checked+.tgl-btn:after{-webkit-transform:rotateY(0);-ms-transform:rotateY(0);transform:rotateY(0);left:0;background:#7FC6A6}
.tgl-flip:checked+.tgl-btn:active:after{-webkit-transform:rotateY(20deg);-ms-transform:rotateY(20deg);transform:rotateY(20deg)}
</style>

<body>

  <span class=&#39;tg-list-item&#39;>
    <input class=&#39;tgl tgl-light&#39; id=&#39;cb1&#39; type=&#39;checkbox&#39;>
    <label class=&#39;tgl-btn&#39; for=&#39;cb1&#39;></label>
  </span>

  <span class=&#39;tg-list-item&#39;>
    <input class=&#39;tgl tgl-ios&#39; id=&#39;cb2&#39; type=&#39;checkbox&#39;>
    <label class=&#39;tgl-btn&#39; for=&#39;cb2&#39;></label>
  </span>

  <span class=&#39;tg-list-item&#39;>
    <input class=&#39;tgl tgl-skewed&#39; id=&#39;cb3&#39; type=&#39;checkbox&#39;>
    <label class=&#39;tgl-btn&#39; data-tg-off=&#39;OFF&#39; data-tg-on=&#39;ON&#39; for=&#39;cb3&#39;></label>
  </span>

  <span class=&#39;tg-list-item&#39;>
    <input class=&#39;tgl tgl-flat&#39; id=&#39;cb4&#39; type=&#39;checkbox&#39;>
    <label class=&#39;tgl-btn&#39; for=&#39;cb4&#39;></label>
  </span>
  
  <span class=&#39;tg-list-item&#39;>
    <input class=&#39;tgl tgl-flip&#39; id=&#39;cb5&#39; type=&#39;checkbox&#39;>
    <label class=&#39;tgl-btn&#39; data-tg-off=&#39;Nope&#39; data-tg-on=&#39;Yeah!&#39; for=&#39;cb5&#39;></label>
  </span>

</body>
</html>

Das obige ist der detaillierte Inhalt vonCSS3-Implementierung des Beispielcodes für benutzerdefinierte Checkbox-Spezialeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Zwei Möglichkeiten, Hintergrundbilder mithilfe von CSS transparent und Text undurchsichtig zu machenNächster Artikel：Zwei Möglichkeiten, Hintergrundbilder mithilfe von CSS transparent und Text undurchsichtig zu machen

In Verbindung stehende Artikel

Mehr sehen