js+css实现卡片悬浮背景滑块跟随动画效果代码
代码语言:html
所属分类:悬停
代码描述:js+css实现卡片悬浮背景滑块跟随动画效果代码
代码标签: js css 卡片 悬浮 背景 滑块 跟随 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } :root { --bg: hsl(0 0% 2%); } body { display: grid; place-items: center; min-height: 100vh; background: var(--bg); } main { width: 60ch; max-width: 100%; } body { font-family: 'Geist', arial; font-weight: 100; } ul { display: grid; grid-template-columns: repeat(2, 1fr); list-style-type: none; padding: 0; margin: 0; } li { padding: 1rem; list-style-type: none; } ul::after { border-radius: 1rem; content: ""; position: absolute; background: hsl(0 0% 10%); pointer-events: none; z-index: -2; inset: calc(var(--top) * 1px) calc(100% - (var(--right) * 1px)) calc(100% - (var(--bottom) * 1px)) calc(var(--left) * 1px); transition: inset 0.2s; } ul[data-enhanced]:hover { --active: 1; } ul[data-enhanced]::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul[data-enhanced]:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } @supports(anchor-name: --anchor) { li:nth-of-type(1) article { anchor-name: --develop; } li:nth-of-type(2) article { anchor-name: --preview; } li:nth-of-type(3) article { anchor-name: --ship; } li:nth-of-type(4) article { anchor-name: --profit; } :root { --anchor: --develop; } :root:has(li:nth-of-type(1):hover) { --anchor: --develop; } :root:has(li:nth-of-type(2):hover) { --anchor: --preview; } :root:has(li:nth-of-type(3):hover) { --anchor: --ship; } :root:has(li:nth-of-type(4):hover) { --anchor: --profit; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) anchor(var(--anchor) bottom) anchor(var(--anchor) left); } ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } article::after { content: unset; display: none; } } ul:not([data-enhanced]) article::after { content: ""; position: absolute; inset: 0; z-index: -2; background: hsl(0 0% 10%); border-radius: 1rem; opacity: var(--li-active, 0); transition: opacity 0.2s; } article { color: hsl(0 0% 80%); padding: 1rem; display: grid; gap: 0.5rem; position: relative; } article::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--bg) 0 2px, transparent 2px 38px) -20px -20px / 40px 40px, linear-gradient(90deg, var(--bg) 0 2px, transparent 2px 38px) -20px -20px / 40px 40px; -webkit-mask: linear-gradient(-35deg, var(--bg) 0%, transparent 45%); mask: linear-gradient(-35deg, var(--bg) 0%, transparent 45%); z-index: -1; opacity: var(--li-active, 0); transition: opacity 0.2s; } li:hover { --li-active: 1; } article h3 { margin: 0; font-weight: 120; } article p { margin: 0; text-wrap: pretty; background: linear-gradient(hsl(0 0% 80%), hsl(0 0% 50%)); color: transparent; -webkit-background-clip: text; background-clip: text; font-weight: 80; } article svg { width: 44px; } article svg path { stroke-width: 0.75; stroke: hsl(var(--hue, 30) calc(var(--li-active, 0) * 60%) 60%); transition: stroke 0.2s; } li:nth-of-type(1) { --hue: 30; } li:nth-of-type(2) { --hue: 280; } li:nth-of-type(3) { --hue: 210; } li:nth-of-type(4) { --hue: 120; } </style> </head> <body > <main> <ul> <li> <article> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" /> </svg> <h3>Develop.</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima alias fuga et ab magnam aliquam commodi ratione vel fugit nesciunt voluptatibus. </p> </article> </li> <li> <article> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-1.5A1.125 1.125 0 0118 18.375M20.625 4.5H3.375m17.25 0c.621 0 1.12.........完整代码请登录后点击上方下载按钮下载查看
网友评论0