在線演示html
話很少說,上代碼:this
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> body { background: #474747; } * { --on: #24bfa5; --off: #7a7a7a; } .switch { background: #fff; display: block; width: 40px; height: 20px; margin: 20px 0; position: relative; cursor: pointer; transition: all 0.2s; } .switch:before, .switch:after { position: absolute; transition: all 0.3s cubic-bezier(0, 0.48, 0.27, 0.98); } #s1 { margin: 25px 5px; width: 30px; height: 10px; border-radius: 5px; background: #1e1e1e; box-shadow: #0005 0 0 15px inset; } #s1:hover { filter: brightness(130%); } #s1:active { filter: brightness(90%); } #s1:before { content: ""; height: 20px; width: 20px; border-radius: 50%; top: -5px; box-shadow: #0003 0 5px 15px; } #s1.off:before { left: -5px; background: var(--off); } #s1.on:before { left: 15px; background: var(--on); } #s2 { border-radius: 10px; } #s2.on { background: var(--on); } #s2.off { background: var(--off); } #s2:after { content: ""; background: #fff; width: 10px; height: 10px; border-radius: 5px; } #s2.off:after { top: 5px; left: 5px; } #s2.on:after { top: 5px; left: 25px; } #s2:hover { filter: brightness(110%); } #s2:active { filter: brightness(90%); } #s3 { border-radius: 10px; background: var(--off); overflow: hidden; } #s3:before { content: ""; width: 40px; height: 20px; border-radius: 10px; background: var(--on); top: 0; left: 0; } #s3.off:before { width: 20px; } #s3:after { content: ""; background: #fff; width: 20px; height: 20px; top: 0; border-radius: 50%; box-shadow: #0008 0 0 25px 5px; } #s3.off:after { left: 0px; } #s3.on:after { left: 20px; } #s3:hover { filter: brightness(110%); } #s3:active { filter: brightness(90%); } #s4 { border-radius: 10px; overflow: hidden; } #s4.on { background: var(--on); } #s4.off { background: var(--off); } #s4:before, #s4:after { color: #fff; line-height: 20px; font-size: 13px; width: 100%; text-align: center; text-shadow: #000a 0 0 5px; } #s4:before { content: "ON"; } #s4.on:before { top: 0; } #s4.off:before { top: 20px; } #s4:after { content: "OFF"; } #s4.off:after { top: 0; } #s4.on:after { top: -20px; } #s4:hover { filter: brightness(110%); } #s4:active { filter: brightness(90%); } </style> <script> function turn(a) { a.className = a.className == "switch on" ? "switch off" : "switch on"; } </script> <body> <span id="s1" class="switch off" onclick="turn(this)"></span> <span id="s2" class="switch off" onclick="turn(this)"></span> <span id="s3" class="switch off" onclick="turn(this)"></span> <span id="s4" class="switch off" onclick="turn(this)"></span> </body> </html>