div+css实现radio立体质感多档位切换按钮效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现radio立体质感多档位切换按钮效果代码
代码标签: div css radio 立体 质感 多档位 切换 按钮
下面为部分代码预览,完整代码请点击下载或在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{ padding:140px; background: black; } .wrapper { position: relative; font-family: monospace; } .knob-outer { user-select: none; position: relative; width: 230px; height: 230px; border-radius: 100%; box-shadow: 10px 10px 10px rgba(202, 202, 202, 0.2) inset, -10px -10px 10px rgba(151, 151, 151, 0.2) inset; background-color: transparent; } .knob-base { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 100%; box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.6), 0 2px 20px rgba(255, 255, 255, 0.1) inset; background: radial-gradient(ellipse at center, #333 0%, #111 100%); } .knob-middle { z-index: 4; position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 100%; box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.2), 0 3px 13px rgba(0, 0, 0, 0.85); background: #111; } .knob-inner { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 100%; background: #222; } .knob-core { position: absolute; left: 50%; top: 50%; width: 100px; height: 100.........完整代码请登录后点击上方下载按钮下载查看
网友评论0