js+css实现鼠标悬浮图片卡片层叠突出放大效果代码
代码语言:html
所属分类:悬停
代码描述:js+css实现鼠标悬浮图片卡片层叠突出放大效果代码
代码标签: js css 鼠标 悬浮 图片 卡片 层叠 突出 放大
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200" rel="stylesheet"> <style> body { height: 100vh; overflow: hidden; background: palegoldenrod; } .gallery-container { position: relative; height: 100vh; width: 100vw; overflow: hidden; } .gallery { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 100vw; height: 200px; perspective: 800px; transform-style: preserve-3d; transform-origin: center center; transform: translateY(-50%); } .frame { display: flex; flex-flow: column; align-items: center; justify-content: center; border: 2px solid white; border-radius: 4px; position: relative; height: 100%; width: 200px; background: white; transform-style: preserve-3d; transform-origin: center center; cursor: pointer; overflow: hidden; background: radial-gradient(#cfaf7f, #6a4a0f); } .frame .image { display: block; position: relative; height: auto; width: 90%; pointer-events: none; } .frame .info { color: white; text-shadow: 0 0 2px rgba(0, 0, 0, 0.8); font-family: "Source Sans Pro", serif; font-size: 1.2em; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="gallery-container"> <div class="gallery"> <div class="frame"><img class="image" src="//repo.bfw.wiki/bfwrepo/image/5e32405c2040e.png" /> <div class="info">Pumpernickel</div> </div> <div class="frame"><img class="image" src="//repo.bfw.wiki/bfwrepo/image/5e32407d9bd1a.png" /> <div class="info">Rye</div> </div> <div class="frame"><img class="image" src="//repo.bfw.wiki/bfwrepo/image/5e32409467029.png" /> <div class="info">Wheat</div> </div> <div class="frame"><img class="image" src="//repo.bfw.wiki/bfwrepo/image/5e3240ab7f831.png" /> <div class="info">Ciabatta</div> </div> <div class="frame"><img class="image" src="//repo.bfw.wiki/bfwrepo/image/5e3240c626ad7.png" /> <div class="info">Baguette</div> </div> </div> <!-- partial --> <script> const $ = selector => document.querySelector(selector); const $$ = selector => document.querySelectorAll(selector); function lerp(n1, n2, speed) { return (1 - speed) * n1 + speed * n2; } function angle(from, to) { return Math.atan2( to[1] - from[1], to[0] - from[0]); } function distance(from, to) { return Math.sqrt( Math.pow(to[0].........完整代码请登录后点击上方下载按钮下载查看
网友评论0