<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checkbox e</title> <style type="text/css"> body { background-color: #EDF0F4; font-family: "Helvetica Rounded", "Arial Rounded MT Bold", "Montserrat", sans-serif; color: #fff; } .toggleWrapper { position: absolute; top: 50%; left: 50%; overflow: hidden; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .toggleWrapper input { position: absolute; left: -99em; } .toggle { cursor: pointer; display: inline-block; position: relative; width: 120px; height: 50px; background: #D21626; border-radius: 5px; -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); } .toggle:before, .toggle:after { position: absolute; line-height: 50px; font-size: 14px; z-index: 2; -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); } .toggle:before { content: "OFF"; left: 20px; color: #D21626; } .toggle:after { content: "ON"; right: 20px; color: #fff; } .toggle__handler { display: inline-block; position: relative; z-index: 1; background: #fff; width: 65px; height: 44px; border-radius: 3px; top: 3px; left: 3px; -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); -webkit-transform: translateX(0px); transform: translateX(0px); } input:checked + .toggle { background: #66B317; } input:checked + .toggle:before { color: #fff; } input:checked + .toggle:after { color: #66B317; } input:checked + .toggle .toggle__handler { width: 54px; -webkit-transform: translateX(60px); transform: translateX(60px); border-color: #fff; } </style> </head> <body> <div class="toggleWrapper"> <input type="checkbox" id="dn" class="dn"/> <label for="dn" class="toggle"><span class="toggle__handler"></span></label> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » checkbox e 喜欢 (2)or分享 (0)
