div+css实现蜿蜒曲折的checkbox开关效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现蜿蜒曲折的checkbox开关效果代码
代码标签: div css 蜿蜒曲折 checkbox 开关
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: grid; place-content: center; height: 100vh; background: #fa5b00; } #wrapper { position: relative; transform: scale(0.5) translate(25px, 140px); transition: 1s ease-in-out; opacity: 0; animation: fadeIn 0.5s ease-in-out 1 forwards 1.25s; } @keyframes fadeIn { to { opacity: 1; } } #wrapper:has(input:checked) { transform: scale(0.5) translate(-10px, -140px); } #wrapper div { position: absolute; width: 30px; height: 30px; background: #000; top: 0; left: 0; border-radius: 100%; offset-path: path("M 60 70 L 140 70 A 30 30 0 1 1 140 140 L 80 140 A 30 30 0 1 0 80 210 L 140 210 A 30 30 0 1 1 140 280 L 80 280 A 30 30 0 0 0 80 350 L 160 350 "); offset-distance: 0.25%; transition: 1s ease-in-out; } #wrapper input { position: absolute; z-index: 9; width: 35px; height: 35px; left: 45px; top: 52.5px; opacity: 0; cursor: pointer; } #wrapper input:checked { top: auto; left: auto; right: 55px; bottom: 55px; } #wrapper input:checked ~ svg path { animation: drawInOut 1s ease-in-out 1 forwards; } @keyframes drawInOut { 0% { stroke-dashoffset: 800px; } 50% { stroke-das.........完整代码请登录后点击上方下载按钮下载查看
网友评论0