js+css实现视觉差异电影海报效果代码
代码语言:html
所属分类:视觉差异
代码描述:js+css实现视觉差异电影海报效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #111; font-family: 'Poppins', sans-serif; } main { display: flex; flex-direction: column; gap: 6vw; max-width: 600px; margin: auto; padding-block: 8vw; } section { display: flex; width: 100%; aspect-ratio: 1/1; justify-content: center; overflow: hidden; } .Card { position: relative; margin-block: min(-25vh, -25vw); height: 100%; width: auto; aspect-ratio: 3/4; perspective: 800px; transform-style: preserve-3d; transition: .1s; transform: rotateX(0deg) rotateY(0deg); border: #111 max(25vw, 25vh) solid; } .Card__title { position: absolute; right: 0; top: 0; bottom: 0; padding: min(6vw, 6vh) min(4vw, 4vh); background: hsla(0,0%,9%,.5); -webkit-backdrop-filter: blur(20px); writing-mode: vertical-rl; text-orientation: upright; text-transform: uppercase; font-size: clamp(1rem, 3vw, 2rem); color: #fff; } .Card img { position: absolute; top: 50%; left: 50%; } .Card img:nth-of-type(1) { height: 160%; transform: translate(-50%, -50%) translateZ(-200px); } .Card img:nth-of-type(2) { height: 110%; transform: translate(-50%, -50%) translateZ(-100px); } .Card img:nth-of-type(3) { height: 140%; transform: translate(-50%, -50%) translateZ(-50px); } .Card img:nth-of-type(4) { height: 130%; transform: translate(-50%, -50%) translateZ(-1px); } .Me { position: fixed; z-index: 10; bottom: 20px; left: 50%; text-align: center; color: #fff; transform: translateX(-50%); font-weight: 700; opacity: .5; } </style> </head> <body > <main> <section> <div class="Card"> <span class="Card__title">Darth Vader</span> <img src="//repo.bfw.wiki/bfwrepo/images/parax/dv-4.webp" /> <img src="//repo.bfw.wiki/bfwrepo/images/parax/dv-3.webp" /> <img src="//repo.bfw.wiki/bfwrepo/images/pa.........完整代码请登录后点击上方下载按钮下载查看
网友评论0