gsap+lenis实现文件夹相册鼠标悬停弹出三张预览图层叠代码-html代码-BFW代码库

gsap+lenis实现文件夹相册鼠标悬停弹出三张预览图层叠代码

代码语言：html

所属分类：悬停

代码描述：gsap+lenis实现文件夹相册鼠标悬停弹出三张预览图层叠代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <style>
     @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap');

:root {
  --bg: #f3f3ef;
  --fg: #111111;

  --variant-1: #f7c531;
  --variant-2: #d9dbd6;
  --variant-3: #bfc1bd;

  --disabled-folder-bg: #ecece7;
  --disabled-folder-fg: #a6a6a6;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  font-family: 'DM Mono', monospace;
  height: 100vh;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

p {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.4s ease;
}

p span {
  display: inline-block;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--fg);
}

.logo {
  width: 100px; 
  height: auto;
  object-fit: cover;
}

h1 {
  font-size: 3rem;
  font-weight: 40.........完整代码请登录后点击上方下载按钮下载查看