Beispielcode für die Gestaltung von Checkout mithilfe von CSS-CSS-Tutorial-php.cn

Beispielcode für die Gestaltung von Checkout mithilfe von CSS
黄舟
Freigeben： 2017-10-24 10:10:14
Original
2988 Leute haben es durchsucht
Beispielcode für die Gestaltung von Checkout mit CSS
<!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>
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonBeispielcode für die Gestaltung von Checkout mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!