css实现对齐按钮导航条选中动画效果代码
代码语言:html
所属分类:菜单导航
代码描述: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; --bg: hsl(var(--hue),10%,90%); --fg: hsl(var(--hue),10%,10%); --primary: hsl(var(--hue),90%,55%); --trans-dur: 0.3s; font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320)); } body, input { font: 1em/1.5 sans-serif; } body { background-color: var(--bg); color: var(--fg); height: 100vh; display: grid; place-items: center; transition: background-color var(--trans-dur), color var(--trans-dur); } /* Main */ .toolbar { background-color: hsl(0,0%,100%); border-radius: 0.5em; box-shadow: 0 0.75em 1.5em hsla(var(--hue),90%,55%,0.2); display: flex; padding: 1em; transition: background-color var(--trans-dur), box-shadow var(--trans-dur); } .toolbar__label { position: relative; width: 1.5em; height: 1.5em; -webkit-tap-highlight-color: transparent; } .toolbar__label + .toolbar__label { margin-left: 1em; } .toolbar__input { cursor: pointer; width: 100%; height: 100%; -webkit-appearance: none; appearance: none; } .toolbar__input:focus { outline: transparent; } .toolbar__icon { color: hsl(var(--hue),20%,90%); display: block; pointer-events: none; position: absolute; top: calc(50% - 1.75em); left: 0; width: 1.5em; height: 3.5em; transition: color var(--trans-dur); } .toolbar__icon-rects { fill: var(--primary); transition: fill var(--trans-dur); } .toolbar__icon-rect { animation-duration: 1s; animation-fill-mode: forwards; } .toolbar--pristine .toolbar__icon-rect { animation-duration: 0s; } .toolbar__icon--align-t .toolbar__icon-rect { animation-name: alignTopB1; transform: translate(0,32px); } .toolbar__icon--align-t .toolbar__icon-rect--delayed { animation-name: alignTopB2; } .toolbar__icon--align-m .toolbar__icon-rect { animation-name: alignMiddleB1; transform: translate(0,36px); } .toolbar__icon--align-m .toolbar__icon-rect--delayed { animation-name: alignMiddleB2; } .toolbar__icon--align-b .toolbar__icon-rect { animation-name: alignBottomB1; transform: translate(0,-32px); } .toolbar__icon--align-b .toolbar__icon-rect--delayed { animation-name: alignBottomB2; } /* Checked states */ .toolbar__input:checked + .toolbar__icon--align-t .toolbar__icon-rect { animation-name: alignTopA1; } .toolbar__input:checked + .toolbar__icon--align-t .toolbar__icon-rect--delayed { animation-name: alignTopA2; } .toolbar__input:checked + .toolbar__icon--align-m .toolbar__icon-rect { animation-name: alignMiddleA1; } .toolbar__input:checked + .toolbar__icon--align-m .toolbar__icon-rect--delayed { animation-name: alignMiddleA2; } .toolbar__input:checked + .toolbar__icon--align-b .toolbar__icon-rect { animation-name: alignBottomA1; } .toolbar__input:checked + .toolbar__icon--align-b .toolbar__icon-rect--delayed { animation-name: alignBottomA2; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),10%,10%); --fg: hsl(var(--hue),10%,90%); --primary: hsl(var(--hue),90%,65%); } .toolbar { background-color: hsl(var(--hue),10%,25%); box-shadow: 0 0.75em 1.5em hsla(var(--hue),90%,65%,0.2); } .toolbar__icon { color: hsl(var(--hue),20%,35%); } } /* Animations */ @keyframes alignTopA1 { from, 25% { animation-timing-function: ease-out; transform: translate(0,32px); } 35%, 55%, 75%, 95%, to { animation-timing-function: ease-in; transform: translate(0,0); } 45% { animation-timing-function: ease-out; transform: translate(0,16px); } 65% { animation-timing-function: ease-out; transform: translate(0,4px); } 85% { animation-timing-function: ease-out; transform: translate(0,1px); } } @keyframes alignTopA2 { from, 30% { animation-timing-function: ease-out; transform: translate(0,32px); } 40%, 60%, 80%, to { animation-timing-function: ease-in; transform: translate(0,0); } 50% { animation-timing-function: ease-out; transform: translate(0,16px); } 70% { animation-timing-function: ease-out; transform: translate(0,4px); } 90% { animation-timing-function: ease-out; transform: translate(0,1px); } } @keyframes alignTopB1 { from { animation-timing-function: ease-in; transform: translate(0,0); } 25%, to { transform: translate(0,32px); } } @keyframes alignTopB2 { from, 5% { animation-timing-function: ease-in; transform: translate(0,0); } 30%, to { transform: translate(0,32px); } } @keyframes alignMiddleA1 { from, 25% { animation-timing-function: ease-out; transform: translate(0,-36px); } 35%, 55%, 75%, 95%, to { animation-timing-function: ease-in; transform: translate(0,0); } 45% { animation-timing-function: ease-out; transform: translate(0,-18px); } 65% { animation-timing-function: ease-out; transform: translate(0,-5px); } 85% { animation-timing-function: ease-out; transform: translate(0,-1px); } } @keyframes alignMiddleA2 { from, 30% { animation-timing-function: ease-out; transform: translate(0,-36px); } 40%, 60%, 80%, to { animation-timing-function: ease-in; transform: translate(0,0); } 50% { animation-timing-function: ease-out; transform: translate(0,-18px); } 70% { animation-timing-function: ease-out; transform: translate(0,-5px); } 90% { animation-timing-function: ease-out; transform: translate(0,-1px); } } @keyframes alignMiddleB1 { from { animation-timing-function: ease-in; transform: translate(0,0); } 25%, to { transform: translate(0,36px); } } @keyframes alignMiddleB2 { fro.........完整代码请登录后点击上方下载按钮下载查看
网友评论0