網站設計素材線性切換
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>線性切換</title> <style> body{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;margin:0;min-height:100vh;font-size:50px;gap:0.25em}.toggle{--color:#000;--color2:#fff;--time:0.35s;--p00:-2.5em;--p01:-2.5em;--p02:-2.5em;--p03:-2.5em;--p04:-2.5em;--p05:-2.5em;--p06:-2.5em;--p07:-2.5em;--p08:-2.5em;--p09:-2.5em;--p10:-2.5em;--p11:-2.5em;--p12:-2.5em;--p13:-2.5em;--p14:-2.5em;--p15:-2.5em;--p16:-2.5em;--p17:-2.5em;--p18:-2.5em;--p19:-2.5em;color:var(--color);appearance:none;position:relative;font-size:1em;box-sizing:content-box;height:1em;width:2.5em;border:max(1px,0.05em) solid;background:linear-gradient(var(--color2) 0 0) calc(100% - 0.2em) 50% / 0.6em 0.6em,linear-gradient(var(--color) 0 0) var(--p00) 0.00em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p01) 0.05em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p02) 0.10em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p03) 0.15em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p04) 0.20em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p05) 0.25em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p06) 0.30em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p07) 0.35em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p08) 0.40em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p09) 0.45em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p10) 0.50em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p11) 0.55em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p12) 0.60em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p13) 0.65em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p14) 0.70em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p15) 0.75em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p16) 0.80em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p17) 0.85em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p18) 0.90em / 100% 0.06em,linear-gradient(var(--color) 0 0) var(--p19) 0.95em / 100% 0.06em,linear-gradient(var(--color) 0 0) 0.2em 50% / 0.6em 0.6em;background-repeat:no-repeat;transition:--p00 var(--time) 0.00s linear,--p01 var(--time) 0.01s ease-in,--p02 var(--time) 0.02s ease-out,--p03 var(--time) 0.03s ease-in-out,--p04 var(--time) 0.04s ease,--p05 var(--time) 0.05s cubic-bezier(0.1,0.7,1,0.1),--p06 var(--time) 0.06s linear,--p07 var(--time) 0.07s ease-in,--p08 var(--time) 0.08s ease-out,--p09 var(--time) 0.09s ease-in-out,--p10 var(--time) 0.10s ease,--p11 var(--time) 0.11s cubic-bezier(0.1,0.7,1,0.1),--p12 var(--time) 0.12s linear,--p13 var(--time) 0.13s ease-in,--p14 var(--time) 0.14s ease-out,--p15 var(--time) 0.15s ease-in-out,--p16 var(--time) 0.16s ease,--p17 var(--time) 0.17s cubic-bezier(0.1,0.7,1,0.1),--p18 var(--time) 0.18s linear,--p19 var(--time) 0.19s ease-in;&::before{content:"";width:0.6em;aspect-ratio:1;position:absolute;top:50%;left:0.5em;background:#f000;transform:translate(-50%,-50%);box-sizing:border-box;border:max(1px,0.05em) solid #0000}&:checked{--p00:0em;--p01:0em;--p02:0em;--p03:0em;--p04:0em;--p05:0em;--p06:0em;--p07:0em;--p08:0em;--p09:0em;--p10:0em;--p11:0em;--p12:0em;--p13:0em;--p14:0em;--p15:0em;--p16:0em;--p17:0em;--p18:0em;--p19:0em;&::before{left:calc(100% - 0.5em)}}&[disabled]{opacity:0.25}}@media print{.toggle{&,&::before,&::after{-webkit-print-color-adjust:exact;print-color-adjust:exact}}}@media (prefers-reduced-motion){.toggle{&,&::before,&::after{transition:none !important;animation:none !important}}}@property --p00{syntax:'<length>';inherits:true;initial-value:0px}@property --p01{syntax:'<length>';inherits:true;initial-value:0px}@property --p02{syntax:'<length>';inherits:true;initial-value:0px}@property --p03{syntax:'<length>';inherits:true;initial-value:0px}@property --p04{syntax:'<length>';inherits:true;initial-value:0px}@property --p05{syntax:'<length>';inherits:true;initial-value:0px}@property --p06{syntax:'<length>';inherits:true;initial-value:0px}@property --p07{syntax:'<length>';inherits:true;initial-value:0px}@property --p08{syntax:'<length>';inherits:true;initial-value:0px}@property --p09{syntax:'<length>';inherits:true;initial-value:0px}@property --p10{syntax:'<length>';inherits:true;initial-value:0px}@property --p11{syntax:'<length>';inherits:true;initial-value:0px}@property --p12{syntax:'<length>';inherits:true;initial-value:0px}@property --p13{syntax:'<length>';inherits:true;initial-value:0px}@property --p14{syntax:'<length>';inherits:true;initial-value:0px}@property --p15{syntax:'<length>';inherits:true;initial-value:0px}@property --p16{syntax:'<length>';inherits:true;initial-value:0px}@property --p17{syntax:'<length>';inherits:true;initial-value:0px}@property --p18{syntax:'<length>';inherits:true;initial-value:0px}@property --p19{syntax:'<length>';inherits:true;initial-value:0px} </style></head><body> <input type="checkbox" role="switch" class="toggle" /></body></html>
掃描查看手機版網站
