球形开关点击效果
代码语言:html
所属分类:表单美化
代码描述:球形开关点击效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #CCC; padding-top: 100px; } .toggle { display: block; text-align: center; margin-top: 40px; user-select: none; } .toggle--checkbox { display: none; } .toggle--btn { display: block; margin: 0 auto; transition: all 350ms ease-in; } .toggle--btn:hover { cursor: pointer; } .toggle--btn, .toggle--btn:before, .toggle--checkbox, .toggle--checkbox:before { transition: all 250ms ease-in; } .toggle--btn:before, .toggle--checkbox:before { content: ""; display: block; } .toggle--daynight .toggle--btn, .toggle--like .toggle--btn { position: relative; height: 70px; width: 125px; border-radius: 70px; } .toggle--daynight .toggle--btn:before, .toggle--like .toggle--btn:before { position: absolute; top: 2px; left: 4px; width: 56px; height: 56px; border-radius: 50%; } .toggle--daynight .toggle--btn { border: 5px solid #888; background-color: #eee; } .toggle--daynight .toggle--btn:before { background-color: #fff; border: 5px solid #aaa; } .toggle--daynight .toggle--checkbox:checked + .toggle--btn { background-color: #8ce685; border: 5px solid #4cbf43; } .toggle--daynight .toggle--checkbox:checked + .toggle--btn:before { left: 55px; background-color: #ffffff; border: 5px solid #b5b5b5; } .toggle--daynight .toggle--.........完整代码请登录后点击上方下载按钮下载查看
网友评论0