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 svg { width: 1.8rem; } .buttons button p { position: absolute; width: 100%; font-size: 0.8rem; opacity: 0; left: 0; bottom: 0.5rem; padding: 0.3rem; text-align: center; transition: all 150ms ease-in-out 0ms; outline: none; translate: 0 10px; } .buttons button:hover p { opacity: 1; translate: 0; transition: all 300ms ease-in-out 150ms; } .buttons button:focus-visible, .buttons button:hover { transform: scale(1.15); z-index: 10; color: #fff; background-color: rgba(var(--bg), 0.5); } .buttons:has(button:focus-visible) button:not(:focus-visible), .buttons:has(button:hover) button:not(:hover) { opacity: 50%; scale: 85%; z-index: -10; } @media (prefers-reduced-motion: no-preference) { :root { --d: 0; --ani-speed: 300ms; } [slide-in-left] { opacity: 0; translate: -500px 0; animation: slide-in var(--ani-speed) ease-out forwards; animation-delay: calc(var(--order, 0ms) * var(--ani-speed)); } [slide-in-right] { opacity: 0; translate: 500px 0; animation: slide-in var(--ani-speed) ease-out forwards; animation-delay: calc(var(--order, 0ms) * var(--ani-speed)); } [slide-in-top] { opacity: 0; translate: 0 -500px; animation: slide-in var(--ani-speed) ease-out forwards; animation-delay: calc(var(--order, 0ms) * var(--ani-speed)); } [slide-in-bottom] { opacity: 0; translate: 0 500px; animation: slide-in var(--ani-speed) ease-out forwards; animation-delay: calc(var(--order, 0ms) * var(--ani-speed)); } [scale-up] { scale: 0; animation: scale-up var(--ani-speed) forwards; animation-delay: calc(var(--order, 0ms) * var(--ani-speed)); } [scale-from-top] { transform-origin: top; scale: 1 0; animation: scale-up var(--ani-speed) forwards; animation-delay: calc(var(--order, 0ms) * var(--ani-speed)); } } @keyframes slide-in { from { opacity: 0; } 50% { opacity: 0; } to { opacity: 1; translate: 0; } } @keyframes scale-up { 0% { scale: 0; } 60% { scale: 1.15; } 100% { scale: 1; } } </style> </head> <body translate="no"> <div class="buttons"> <!-- Furniture --> <div scale-up style="--order:1; --bg:220,38,38"> <button type="button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler-sofa"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M4 11a2 2 0 0 1 2 2v1h12v-1a2 2 0 1 1 4 0v5a1 1 0 0 1 -1 1h-18a1 1 0 0 1 -1 -1v-5a2 2 0 0 1 2 -2z" /> <path d="M4 11v-3a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v3" /> <path d="M12 5v9" /> </svg> <p>Furniture</p> </button> </div> <!-- Propoerty --> <div scale-up style="--order:2; --bg:124,58,237"> <button type="button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler-home"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M5 12l-2 0l9 -9l9 9l-2 0" /> <path d="M5 12v7a2 2 0 0 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0