css+div实现checkbox气垫板开关效果代码
代码语言:html
所属分类:布局界面
代码描述:css+div实现checkbox气垫板开关效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @keyframes cambiaBarra { 0%, 100% { height: 100%; } 30%, 70% { height: 20%; } /* 50% { height: 25%; } */ } @keyframes cambiaTama { 0%, 100% { height: 0.8em; width: 0.8em; } 20%, 80% { height: 0.3em; width: 0.3em; } } @keyframes cambiaPosicion { 0% { top: 50%; left: 0.5em; } 33.33% { top: 0.1em; } 66.66% { top: 0.9em; } 100% { top: 50%; left: 1.5em; } } @keyframes cambiaZindex { 0%, 100% { z-index: 3; } 40%, 60% { z-index: 1; } } @keyframes aIzquierda { from { left: 1.5em; } to { left: 0.5em; } } .toggle { --color: #00f; --tiempo: 0.6s; appearance: none; display: inline-block; box-sizing: content-box; border: 1px solid #0000; font-size: 1em; width: 2em; height: 1em; position: relative; border-radius: 2em; &::before { content: ""; position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color); border-radius: 2em; z-index: 2; } &::after { content: ""; position: absolute; width: 0.8em; height: 0.8em; top: 50%; left: 0.5em; transform: translate(-50%, -50%); background: #fff; border-radius: 2em; z-index: 3; border: 1px solid #0000; box-sizing: border-box; animation: aIzquierda 0.5s 1 forwards; } &:checked { &::before { animation: cambiaBarra var(--tiempo) 1 linear forwards; } &::after { left: 1.5em; animation: cambiaZindex var(--tiempo) 1 linear forwards, cambiaPosicion var(--tiempo) 1 linear forwards, cambiaTama var.........完整代码请登录后点击上方下载按钮下载查看
网友评论0