div+css实现图标按钮鼠标菜单悬停动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现图标按钮鼠标菜单悬停动画效果代码
代码标签: div css 图标 按钮 菜单 鼠标 悬停 动画效
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --clr-bg: #efefef; --clr-primary: #0f172a; --easing: cubic-bezier(0.47, 1.64, 0.41, 0.8); } /* reset button */ input, button { appearance: none; background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; margin: 0; font-family: inherit; font-size: inherit; color: inherit; text-decoration: none; text-transform: none; line-height: normal; overflow: visible; } body { margin: 0; padding: 2rem; display: grid; place-items: center; min-height: 100vh; color: #ffffff30; background: var(--clr-primary); font-family: poppins, sans-serif; } .buttons { max-width: 500px; width: 100%; border-radius: 20px; background-color: #00000050; border: 1px solid #ffffff30; padding: 2rem; backdrop-filter: blur(12px); display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); justify-content: center; gap: 1.5rem; position: relative; } .buttons::before{ content: ''; position: absolute; inset: 0; background-color: #00000020; z-index: -1; border-radius: inherit; transition: inset 500ms ease-in-out; } .buttons:hover::before{ inset: -2rem; transition-timing-function: cubic-bezier( 0.47, 1.64, 0.41, 0.8 ); } .buttons button { background-color: #00000050; border: 1px solid #ffffff30; padding: 1rem; width: 100%; height: 100%; aspect-ratio: 1/1; border-radius: 5px; outline: none; overflow: hidden; cursor: pointer; transition: 300ms ease-in-out; position: relative; isolation: isolate; color: #ffffff90; } .buttons button sv.........完整代码请登录后点击上方下载按钮下载查看
网友评论0