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/reset.min.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap"); html, body { width: 100%; height: 100%; font-family: "Montserrat", sans-serif; } .centered { display: flex; align-items: center; justify-content: center; gap: 3rem; height: 100%; } .card { position: relative; height: 28rem; width: 20rem; aspect-ratio: 5/7; color: #ffffff; perspective: 50rem; } .card .shadow { position: absolute; inset: 0; background: var(--url); background-size: cover; background-position: center; opacity: 0.8; filter: blur(2rem) saturate(0.9); box-shadow: 0 -1.5rem 2rem -0.5rem rgba(0, 0, 0, 0.7); transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 2rem, -2rem); } .card .image { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 40%), var(--url); background-size: cover; background-position: center; -webkit-mask-image: var(--url); mask-image: var(--url); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center; } .card .image.background { transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 0rem); } .card .image.cutout { transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 4rem) scale(0.92); z-index: 3; } .card .content { position: absolute; display: flex; flex-direction: column; justify-content: flex-end; inset: 0; padding: 3.5rem; transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 6rem); z-index: 4; } .card::after, .card::before { content: ""; position: absolute; inset: 1.5rem; border: #e2c044 0.5rem solid; transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 2rem); } .card::before { z-index: 4; } .card.border-left-behind::before { border-left: transparent; } .card.border-right-behind::before { border-right: transparent; } .card.border-bottom-behind::before { border-bottom: transparent; } h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; text-shadow: 0 0 2rem rgba(0, 0, 0, 0.5); } p { font-weight: 300; text-shadow: 0 0 2rem rgba(0, 0, 0, 0.5); } </style> </head> <body > <div class="centered"> <div class="card border-left-behind"> <div class="shadow" style="--url: url('//repo.bfw.wiki/bfwrepo/images/photo/full.png')"></div> <div class="image background" style="--url: url('//repo.bfw.wiki/bfwrepo/images/photo/Background.png')"></div> <div class="image cutout" style="--url: url('//repo.bfw.wiki/bfwrepo/images/photo/cutout.png')"></div> <div class="content"> <h2>Hover me!</h2> <p>Lorem, ipsum dolor si.........完整代码请登录后点击上方下载按钮下载查看
网友评论0