js+css实现视觉差异卡片悬浮立体交互效果代码
代码语言:html
所属分类:视觉差异
代码描述:js+css实现视觉差异卡片悬浮立体交互效果代码
代码标签: js css 视觉 差异 卡片 悬浮 立体 交互
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.normalize.min.css"> <style> * { box-sizing: border-box; } body { display: grid; min-height: 100vh; place-items: center; perspective: 100vmin; background: var(--gray-9); grid-auto-flow: column; gap: 1rem; align-content: center; justify-content: center; } img { width: 100%; -o-object-fit: cover; object-fit: cover; height: 100%; scale: 1.2; translate: 0 0; } .card:not(:hover) img { transition: translate 0.2s; } .card:hover img { translate: calc((var(--ratio-x) - 0.5) * 20%) calc((var(--ratio-y) - 0.5) * 20%); } .card { --ratio-x: 0; --ratio-y: 0; overflow: hidden; aspect-ratio: 3 / 4; width: 50vmin; min-width: 280px; border-radius: 8px; transform-style: preserve-3d; touch-action: none; transition: transform 0.2s; } .card:hover { transition: transform 0s; transform: rotateX(calc((var(--ratio-y) - 0.5) * 50deg)) rotateY(calc((var(--ratio-x) - 0.5) * -40deg)); } .card:after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at calc(var(--ratio-x) * 100%) calc(var(--ratio-y) * 100%), hsl(0 0% 100% / 0.5), transparent 50%); background-repeat: no-repeat; background-blend-mode: soft-light; z-index: 2; } .card:before { content: ""; background: url(//repo.bfw.wiki/bfwrepo/icon/6083e11017bab.png) 0 0 / 18% 18%, linear-gradient(115deg, transparent 20%, var(--green-8) 30%, transparent 48% 52%, var(--indigo-8) 70%, transparent ) 80% 80% / 300% 300%; filter: brightness(2) .........完整代码请登录后点击上方下载按钮下载查看
网友评论0