html模拟按钮开关案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .btn-switch { cursor: pointer; width: 52px; height: 31px; position: relative; border: 1px solid #dfdfdf; background-color: #fdfdfd; box-shadow: #dfdfdf 0 0 0 0 inset; border-radius: 20px; background-clip: content-box; display: inline-block; -webkit-appearance: none; user-select: none; outline: none !important; } .btn-switch.large { width: 70px; height: 30px; border-radius: 30px; } .btn-switch.large:before { content: ''; width: 28px; height: 28px; border-radius: 30px; } .btn-switch.large:after { content: ''; color: #999; left: 30px; position: absolute; line-height: 30px; font-size: 14px; } .btn-switch.large:checked:after { content: ''; color: #fff; left: 10px; position: absolute; line-height: 30px; font-size: 14px; } .btn-switch.large:checked:before { left: 40px; } .btn-switch:before { content: ''; width: 29px; height: 29px; position: absolute; top: 0px; left: 0; border-radius: 20px; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .btn-switch:checked { border-color: #64bd63; box-shadow: #64bd63 0 0 0 16px inset; background-color: #64bd63; } .btn-switch:checked:before { left: 21px; } .btn-switch.btn-switch-animbg { transition: background-color ease 0.4s; } .btn-switch.btn-switch-animbg:before { transition: left 0.3s; } .btn-switch.btn-switch-animbg:checked { box-shadow: #dfdfdf 0 0 0 0 inset; background-color: #64bd63; transition: border-color 0.4s, background-color ease 0.4s; } .btn-switch.btn-switch-animbg:checked:before { transition: left 0.3s; } .btn-switch.btn-switch-anim { transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s; } .btn-switch.btn-switch-anim:before { transition: left 0.3s; } .btn-switch.btn-switch-anim:checked { box-shadow: #64bd63 0 0 0 16px inset; background-color: #64bd63; transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s; } .btn-switch.btn-switch-anim:checked:before { transition: left 0.3s; } input[type=checkbox]:checked::before { font: normal normal normal 14px/2 FontAwesome; } </style> </head> <body> <label><input class="btn-switch large" type="checkbox" value="" checked=""></label> </body> </html>
您还未登录, 登录 后可进行评论
发表
还没有评论哦,来抢个沙发吧!