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