css实现菜单点击变关闭按钮动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现菜单点击变关闭按钮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @layer normalize, base, utils, button; @import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css') layer(normalize); @layer base { body { background: hsl(0 0% 96%); display: grid; place-items: center; min-height: 100vh; font-family: "Google Sans", sans-serif, system-ui; } } @layer utils { .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } } @layer button { button { --size: calc(2 * 48px); --step: 0.2s; --line: hsl(0 0% 35%); outline-color: var(--line); background: hsl(0 0% 100%); height: var(--size); aspect-ratio: 1; padding: calc(var(--size) * 0.2); border-radius: calc(var(--size) * 0.2); border: 1px solid hsl(0 0% 50%); display: flex; flex-direction: column; overflow: hidden; transition: transform var(--step) var(--ease-elastic-5), box-shadow var(--step) var(--ease-elastic-5), background var(--step); transform: translateY(var(--elevate, 0)) scale(var(--scale, 1)); box-shadow: calc(var(--size) * var(--shadow-x, 0.05)) calc(var(--size) * var(--shadow-y, 0.05)) 0 calc(var(--size) * var(--spread, 0)); } button:hover { background: hsl(0 0% 98%); /* --shadow: 0; --elevate: -5%; --scale: 1.1; --shadow-x: 0.05; --shadow-y: calc(0.05 * 1.1); */ } button:active { --shadow: 0; --elevate: 5%; --scale: 0.9; --shadow-x: 0; --shadow-y: 0; } span { flex: 1; width: 100%; background: linear-gradient( transparent 0 40%, var(--line) 40% 60.........完整代码请登录后点击上方下载按钮下载查看
网友评论0