svg+css电源开关按钮点击动画效果代码
代码语言:html
所属分类:布局界面
代码描述:svg+css电源开关按钮点击动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --offHue: 3; --onHue: 123; --bg: hsl(var(--hue),10%,50%); --fg: hsl(var(--hue),10%,10%); --off1: hsl(var(--offHue),90%,25%); --off2: hsl(var(--offHue),90%,40%); --off3: hsl(var(--offHue),90%,50%); --off4: hsl(var(--offHue),90%,65%); --on1: hsl(var(--onHue),90%,15%); --on2: hsl(var(--onHue),90%,30%); --on3: hsl(var(--onHue),90%,40%); --on4: hsl(var(--onHue),90%,55%); font-size: calc(60px + (90 - 60) * (100vw - 320px) / (1280 - 320)); } body, input { font: 1em/1.5 sans-serif; } body { background: var(--bg); color: var(--fg); height: 100vh; display: grid; place-items: center; } .t { position: relative; width: 1.5em; height: 1.5em; } .t__checkbox, .t__sr, .t__svg { position: absolute; top: 0; left: 0; } .t__checkbox, .t__svg { width: 100%; height: 100%; } .t__checkbox { background-color: var(--off2); border-radius: 50%; box-shadow: 0 0 0 0.1em var(--off1) inset, 0 0 0 0.2em var(--off4) inset, -0.3em 0.5em 0 var(--off3) inset, 0 0.15em 0 hsla(0,0%,0%,0.2); filter: brightness(1); transition: background-color 0.15s linear, box-shadow 0.15s linear, filter 0.15s linear, transform 0.15s linear; -webkit-appearance: none; appearance: none; } .t__checkbox:active { box-shadow: 0 0 0 0.1em var(--off1) inset, 0 0 0 0.2em var(--off4) inset, -0.3em 0.5em 0 var(--off3) inset, 0 0.05em 0 hsla(0,0%,0%,0.2); } .t__checkbox:active, .t__checkbox:active + .t__svg { transform: scale(0.9); } .t__checkbox:checked { background-color: var(--on2); box-shadow: 0 0 0 0.1em var(--on1) inset, 0 0 0 0.2em var(--on4) inset, -0.3em 0.5em 0 var(--on3) inset, 0 0.15em 0 hsla(0,0%,0%,0.2); } .t__checkbox:checked:active { box-shadow: 0 0 0 0.1em var(--on1) inset, 0 0 0 0.2em var(--on4) inset, -0.3em 0.5em 0 var(--on3) inset, 0 0.05em 0 hsla(0,0%,0%,0.2); } .t__checkbox:focus, .t__checkbox:hover { filter: brightness(1.2); } .t__checkbox:focus { outline: 0; } .t__sr { clip: rect(1px,1px,1px,1px); overflow: hidden; width: 1px;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0