css+svg实现checkbox液态融合滑动开关效果代码
代码语言:html
所属分类:布局界面
代码描述:css+svg实现checkbox液态融合滑动开关效果代码
代码标签: css svg checkbox 液态 融合 滑动 开关
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <title>BFW NEW PAGE</title> <style> body{ margin: 160px; background: #212121; } .toggle-container { --active-color: #1868e3; --inactive-color: #d3d3d6; position: relative; aspect-ratio: 292 / 142; height: 1.875em; } .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 .4s; } .toggle-input:checked + .toggle .toggle-background { fill: var(--active-color); } .toggle-circle-center { transform-origin: center; transition: transform .6s; } .toggle-input:checked + .toggle .toggle-circle-center { transform: translateX(150px); } .toggle-circle { transform-origin: center; transition: transform .45s; backface-visibility: hidden; } .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 .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 type="checkbox" class="toggle-input"> <svg xmlns="http://www.w3.org/2000/svg&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0