div+css实现彩色立体小球checkbox胶囊开关效果代码
代码语言:html
所属分类:表单美化
代码描述:div+css实现彩色立体小球checkbox胶囊开关效果代码
代码标签: div css 彩色 立体 小球 checkbox 胶囊 开关
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: 1px solid transparent; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; min-height: 100vh; font-size: 2em; } .toggle-wrapper { display: inline-block; position: relative; border-radius: 3.125em; overflow: hidden; } .toggle-checkbox { -webkit-appearance: none; appearance: none; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; } .toggle-container { display: flex; position: relative; border-radius: inherit; width: 2.5em; height: 1.25em; background-color: #d1d4dc; box-shadow: inset 0.0625em 0 0 #d4d2de, inset -0.0625em 0 0 #d4d2de, inset 0.125em 0.25em 0.125em 0.25em #b5b5c3; mask-image: radial-gradient(#fff, #000); transition: all 0.4s; } .toggle-wrapper.red > .toggle-checkbox:checked + .toggle-container { background-color: #f5233c; box-shadow: inset 0.0625em 0 0 #f5233c, inset -0.0625em 0 0 #f5233c, inset 0.125em 0.25em 0.125em 0.25em #d70026; } .toggle-wrapper.yellow > .toggle-checkbox:checked + .toggle-container { background-color: #fbc433; box-shadow: inset 0.0625em 0 0 #fbc433, inset -0.0625em 0 0 #fbc433, inset 0.125em 0.25em 0.125em 0.25em #ee9902; } .toggle-wrapper.blue > .toggle-checkbox:checked + .toggle-container { background-color: #4588ff; box-shadow: inset 0.0625em 0 0 #4588ff, inset -0.0625em 0 0 #4588ff, inset 0.125em 0.25em 0.125em 0.25em #3952f3; } .toggle-ball { position: relative; border-radius: 50%; width: 1.25em; height: 1.25em; background-image: radial-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 16%), radial-gradient(#d2d4dc, #babac2); background-position: -0.25em -0.25em; background-size: auto, calc(100% + .25em) calc(100% + .25em); background-repeat: no-repeat; box-shadow: 0.25em 0.25em 0.25em #8d889e, inset 0.0625em 0.0625em 0.25em #d1d1d6, inset -0.0625em -0.0625em 0.25em #8c869e; transition: transform 0.4s, box-shadow 0.4s; } .toggle-ball::after { content: ""; positi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0