div+css实现立体质感checkbox开关效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现立体质感checkbox开关效果代码
代码标签: div css 立体 质感 checkbox 开关
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> body{ background: #212121; } .rocker { display: inline-block; position: relative; /* SIZE OF SWITCH ============== All sizes are in em - therefore changing the font-size here will change the size of the switch. See .rocker-small below as example. */ font-size: 2em; font-weight: bold; text-align: center; text-transform: uppercase; color: #888; width: 7em; height: 4em; overflow: hidden; border-bottom: 0.5em solid #eee; } .rocker-small { font-size: 0.75em; /* Sizes the switch */ margin: 1em; } .rocker::before { content: ""; position: absolute; top: 0.5em; left: 0; right: 0; bottom: 0; background-color: #999; border: 0.5em solid #eee; border-bottom: 0; } .rocker input { opacity: 0; width: 0; height: 0; } .switch-left, .switch-right { cursor: pointer; position: absolute; display: flex; align-items: center; justify-content: center; height: 2.5em; width: 3em; transition: 0.2s; user-select: none; } .switch-left { height: 2.4em; width: 2.75em; left: 0.85em; bottom: 0.4em; background-color: #ddd; transform: rotate(15deg) skewX(15deg); } .switch-right { right: 0.5em; bottom: 0; background-color: #bd5.........完整代码请登录后点击上方下载按钮下载查看
网友评论0