div+css布局实现旋钮黑白亮色及暗色点击旋转效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现旋钮黑白亮色及暗色点击旋转效果代码
代码标签: div css 布局 旋钮 黑白 亮色 暗色 点击 旋转
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:600); :root { --white: #fff; --black: #000; --baseColor: #101010; --baseColorBorder: #202020; --knobBorder: #000; --knobColor: #505050; --knobHightlight: #fff; } .dark { --white: #000; --black: #fff; --baseColor: #e1e1e1; --baseColorBorder: #f1f1f1; --knobBorder: #303030; --knobColor: #e8e8e8; --knobHightlight: #ee5529; } body { background-color: black; font-family: 'Barlow Semi Condensed'; text-rendering: geometricPrecision; margin: 0; padding: 0; height: 100vh; display: flex; align-items: center; justify-content: center; } .control-knob { background-color: var(--baseColor); padding: 10px; display: flex; position: relative; flex-wrap: wrap; justify-content: space-between; width: 100px; height: 70px; border: 1px solid var(--baseColorBorder); border-radius: 3px; &:first-child { margin-right: 20px; } & input { position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; cursor: pointer; z-index: 10; &:checked ~ .knob .knob-center { transform: rotate(40deg); &:after { transform: rotate(-90deg) } } } & .knob { display: flex; width: 100%; justify-content: center; & .knob-center { width: 40px; height: 40px; background-color: var(--knobColor); border-radius: 100%; z-index: 2; position: relative; left: -2px; border: 5px solid var(--knobBorder); outline: 1px solid #303030; transform: rotate(-45deg); transition: all 0.1s ease; &:before { content: ""; height: 50%; width: 3px; display: block; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); border-radius: 3px; box-shadow: 1px 1px 2px rgba(0,0,0,0.4); background-color: var(--knobHightlight); } &:after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: transparent; bor.........完整代码请登录后点击上方下载按钮下载查看
网友评论0