div+js实现鼠标悬浮三维卡片视觉差异动画效果代码
代码语言:html
所属分类:视觉差异
代码描述:div+js实现鼠标悬浮三维卡片视觉差异动画效果代码
代码标签: div js 鼠标 悬浮 三维 卡片 视觉 差异 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @property --ratio-x { syntax: "<number>"; inherits: true; initial-value: 0; } @property --correction { syntax: "<percent>"; inherits: true; initial-value: 0%; } @property --ratio-y { syntax: "<number>"; inherits: true; initial-value: 0; } :root { --labs-sys-color-surface: #444; --labs-sys-color-on-surface: hsl(0, 100%, 0%); --labs-sys-color-background: black; --labs-sys-radius-surface: 2rem; --c1: #ddb4eb; } .logo { color: white; font-weight: bold; font-size: 7cqw; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .logo:before { position: absolute; content: "CSS"; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; color: rgba(0, 0, 0, 0.4); z-index: -1; } .logo:after { position: absolute; content: "CSS"; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; color: white; transform-style: preserve-3d; transition: all 0.2s linear; transform: perspective(100px) translateZ(calc(0.01rem + 0.5rem * var(--ratio-x))) translate(calc(0rem + var(--ratio-x) * -1rem), calc(0rem + var(--ratio-y) * -1rem)) rotateY(calc(-10deg * var(--ratio-x))) rotateX(calc(10deg * var(--ratio-y))); } .holo-bg { position: absolute; border-radius: inherit; --size: 0; top: var(--size); right: var(--size); bottom: var(--size); left: var(--size); background: radial-gradient(ellipse at calc(90% - var(--ratio-x) * 20%) calc(0% - var(--ratio-y) * 20%), rgba(255, 255, 255, 0.7), var(--c1) 1%, rgba(255, 66, 236, 0.76) 20%, transparent), linear-gradient(110deg, #0093ff calc(10% - var(--ratio-x) * 20%), #51d6fd calc(20% - var(--ratio-x) * 20%), #0093ff calc(30% - var(--ratio-x) * 20%), rgba(255, 66, 236, 0.76) calc(60% - var(--ratio-x) * 20%), transparent calc(100% - var(--ratio-x) * 20%), transparent); transition: all 0.2s linear, opacity 0.8s ease; mix-blend-mode: hard-light; opacity: 0.3; } .holo-lines { -webkit-mask-image: url(//repo.bfw.wiki/bfwrepo/images/card/holo-card-lines.png?v5); mask-image: url(//repo.bfw.wiki/bfwrepo/images/card/holo-card-lines.png?v5); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; content: ""; position: absolute; border-radius: inherit; --size: 0.001rem; top: var(--size); right: var(--size); bottom: var(--size); left: var(--size); pointer-events: none; background: linear-gradient(110deg, #0093ff calc(10% - var(--ratio-x) * 20% - var(--correction)), #51d6fd calc(20% - var(--ratio-x) * 20% - var(--correction)), #0093ff calc(30% - var(--ratio-x) * 20% - var(--correction)), hsla(192, 83%, calc(77% - 20% * var(--ratio-x)), 1) calc(40% - var(--ratio-x) * 20% - var(--correction)), transparent calc(60% - var(--ratio-x) * 20% - var(--correction)), magenta calc(70% - var(--ratio-x) * 20% - var(--correction)), black calc(80% - var(--ratio-x) * 20% - var(--correction))); transition: all 0.2s linear; pointer-events: none; } .circles { position: absolute; border-radius: inherit; --size: 0; overflow: hidden; top: var(--size); left: var(--size); right: var(--size); bottom: var(--size); opacity: 0.1; transition: all 0.8s ease; } .circles:before { content: ""; position: absolute; aspect-ratio: 1/1; top:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0