css+svg实现水滴液态checkbox开关切换效果代码
代码语言:html
所属分类:布局界面
代码描述:css+svg实现水滴液态checkbox开关切换效果代码
代码标签: css svg 水滴 液态 checkbox 开关 切换
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; font-size: 2em; gap: 1em; } .toggle-container { --inactive-color: #d3d3d6; position: relative; aspect-ratio: 292/142; height: 1.875em; } .toggle-container:nth-child(1) { --active-color: #35c759; } .toggle-container:nth-child(2) { --active-color: #1868e3; } .toggle-input { appearance: none; margin: 0; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; } .toggle { width: 100%; height: 100%; overflow: visible; } .toggle-background { fill: var(--inactive-color); transition: fill 0.4s; } .toggle-input:checked + .toggle .toggle-background { fill: var(--active-color); } .toggle-circle-center { transform-origin: center; transition: transform 0.6s; } .toggle-input:checked + .toggle .toggle-circle-center { transform: translateX(150px); } .toggle-circle { transform-origin: center; backface-visibility: hidden; transition: transform 0.45s; } .toggle-circle.left { transform: scale(1); } .toggle-input:checked + .toggle .toggle-circle.left { transform: scale(0); } .toggle-circle.right { transform: scale(0); } .toggle-input:checked + .toggle .toggle-circle.right { transform: scale(1); } .toggle-icon { transition: fill 0.4s; } .toggle-icon.on { fill: var(--inactive-color); } .toggle-input:checked + .toggle .toggle-icon.on { fill: #fff; } .toggle-icon.off { fill: #eaeaec; } .toggle-input:checked + .toggle .toggle-icon.off { fill: var(--active-color); } </style> </head> <body> <div class="toggle-container"> <input class="toggle-input".........完整代码请登录后点击上方下载按钮下载查看
网友评论0