react实现可感知鼠标方向的按钮悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:react实现可感知鼠标方向的按钮悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *:after, *:before { box-sizing: border-box; } body { min-height: 100vh; display: grid; place-items: center; background: #1a1a1a; } #app { display: grid; grid-template-columns: 1fr; grid-gap: 1rem; } .dir-control { --borderWidth: 2; --buttonColor: #c7edef; --bg: #0d0d0d; --backdrop: transparent; --fontSize: 1; --horizontalPadding: 16; --verticalPadding: 8; background: var(--backdrop); border: calc(var(--borderWidth) * 1px) solid var(--buttonColor); border-radius: 9999px; text-align: center; line-height: 24px; color: var(--textColor, var(--buttonColor)); cursor: pointer; font-size: calc(var(--fontSize) * 1rem); font-weight: bold; font-family: sans-serif; outline: transparent; padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px); position: relative; text-decoration: none; height: 60px; display: flex; align-items: center; justify-content: center; width: 300px; transition: transform 0.2s; transform: translate(0, calc(var(--y, 0) * 1%)) scale(var(--scale, 1)); } .dir-control:hover { --y: -5; --scale: 1.05; } .dir-control:active { --y: 0; --scale: 0.95; } .dir-control span { -webkit-clip-path: var(--clip); bottom: calc(var(--borderWidth) * -1px); clip-path: var(--clip); left: calc(var(--borderWidth) * -1px); position: absolute; right: calc(var(--borderWidth) * -1px); top: calc(var(--borderWidth) * -1px); z-index: 1; } .dir-control span:nth-of-type(1):hover, .dir-control span:nth-of-type(2):hover, .dir-control span:nth-of-type(3):hover, .dir-control span:nth-of-type(4):hover { --clip: polygon(0 0, 100% 0, 100% 100%, 0 100%); z-index: 2; } .dir-control span:nth-of-type(1):hover ~ b:nth-of-type(1), .dir-control span:nth-of-type(2):hover ~ b:nth-of-type(2), .dir-control span:nth-of-type(3):hover ~ b:nth-of-type(3), .dir-control span:nth-of-type(4):hover ~ b:nth-of-type(4) { --clip: inset(0 0 0 0); } .dir-control span:nth-of-type(1) { --clip: polygon(0 0, 100% 0, 50% 50%, 50% 50%); } .dir-control span:nth-of-type(2) { --clip: polygon(100% 0, 100% 100%, 50% 50%); } .dir-control span:nth-of-type(3) { --clip: polygon(0 100%, 100% 100%, 50% 50%); } .dir-control span:nth-of-type(4) { --clip: polygon(0 0, 0 100%, 50% 50%); } .dir-control b { -webkit-clip-path: var(--clip); background: var(--slideColor, var(--buttonColor)); border: calc(var(--borderWidth) * 1px) solid var(--buttonColor); bottom: calc(var(--borderWidth) * -1px); font-weight: bold; clip-path: var(--clip); color: var(--bg, #fafafa); left: calc(var(--borderWidth) * -1px); padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px); position: absolute; right: calc(var(--borderWidth) * -1px); top: calc(var(--borderWidth) * -1px); transition: -webkit-clip-path 0.25s ease; transition: clip-path 0.25s ease; transition: clip-path 0.25s ease, -webkit-clip-path 0.25s ease; border-radius: 9999px; display: flex; align-it.........完整代码请登录后点击上方下载按钮下载查看
网友评论0