div+css布局胶囊点状checkbox开关效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局胶囊点状checkbox开关效果代码
代码标签: div css 布局 胶囊 点状 checkbox 开关
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; font-size: 50px; gap: 0.5em; } @property --c0 { syntax: '<color>'; initial-value: #000; inherits: true; } @property --c1 { syntax: '<color>'; initial-value: #000; inherits: true; } @property --c2 { syntax: '<color>'; initial-value: #000; inherits: true; } @property --c3 { syntax: '<color>'; initial-value: #000; inherits: true; } @property --c4 { syntax: '<color>'; initial-value: #000; inherits: true; } @property --c5 { syntax: '<color>'; initial-value: #000; inherits: true; } @property --c6 { syntax: '<color>'; initial-value: #000; inherits: true; } .circles { --c0: #000; --c1: #000; --c2: #000; --c3: #000; --c4: #000; --c5: #000; --c6: #000; --speed: 0.35s; appearance: none; position: relative; font-size: 1em; box-sizing: content-box; height: 1em; width: 2.5em; border: max(1px, 0.05em) solid #000; border-radius: 1em; &::before, &::after { content: ""; position: absolute; top: 50%; left: 0.5em; transform: translate(-50%, -50%); border: max(1px, 0.05em) solid #0000; width: 0.7em; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--c0) 0.05em, #0000 0), radial-gradient(circle, var(--c1) 0.10em, #0000 0), radial-gradient(circle, var(--c2) 0.15em, #0000 0), .........完整代码请登录后点击上方下载按钮下载查看
网友评论0