css实现radio旋钮触控交互开关美化效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现radio旋钮触控交互开关美化效果代码
代码标签: css radio 旋钮 触控 交互 开关 美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0; } body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #f5f5f5; color: #333; font-family: sans-serif; font-size: 4vmin; font-weight: 100; line-height: 1; } fieldset { display: block; width: 20vmin; height: 20vmin; position: relative; } input, label, .dial { position: absolute; } label { width: 20vmin; left: 35vmin; white-space: nowrap; } label::after { content: ""; width: 8.25vmin; height: 0.5vmin; margin-right: 1vmin; position: absolute; top: 1.75vmin; right: 100%; border-radius: 0.25vmin; background-color: #333; } label[for=option-1] { top: 8vmin; left: -35vmin; text-align: right; } label[for=option-1]::after { width: 12vmin; left: 100%; margin-left: 1vmin; } label[for=option-2] { top: -8vmin; } label[for=option-3] { top: 8vmin; } label[for=option-3]::after { width: 12vmin; } label[for=option-4] { top: 24vmin; } label[for=option-2]::before, label[for=option-4]::before { content: ""; width: 11vmin; height: 0.5vmin; position: absolute; top: 1.75vmin; left: -20vmin; background-color: #333; transform-origin: right center; } label[for=option-2]::before { transform: rotate(-45deg); } label[for=option-4]::before { transform: rotate(45deg); } .dial { width: 20vmin; height: 20vmin; position: relative; z-index: -1; border-radius: 50%; background.........完整代码请登录后点击上方下载按钮下载查看
网友评论0