gsap实现自定义鼠标及视频背景文字重叠布局效果代码
代码语言:html
所属分类:布局界面
代码描述:gsap实现自定义鼠标及视频背景文字重叠布局效果代码
代码标签: gsap 自定义 鼠标 视频 背景 文字 重叠 布局
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Alkatra&family=Anton&family=Bebas+Neue&family=Jost:ital,wght@1,600&family=Lexend:wght@700&family=Nova+Oval&family=Oswald:wght@500&family=PT+Serif:wght@700&family=Titillium+Web&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap'); * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } :root { --font1: "Poppins"; --fontSizeMenu: 1vw; --fontSizeH1: 19vw; --fontSizeIntro: 3vw; --fontSizeP: 1.48vw; --maxWidth: 1100px; } body { margin: 0; font-family: var(--font1); background-color: #000; color: #fff; } .flex, .flex__col { display: flex; justify-content: center; align-items: center; } .flex__col { flex-direction: column; } ul { margin: 0; padding: 0; list-style: none; } main.flex__col { width: 100%; justify-content: flex-start; } .menu { position: fixed; z-index: 999; top: 0; left: 50%; width: calc(100% - 80px); justify-content: space-between; margin: 40px 0; transform: translatex(-50%); } .menu a { font-size: var(--fontSizeMenu); font-weight: 600; color: var(--dark); text-decoration: none; } .menu__right { width: 50px; height: 50px; gap: 5px; background-color: #fff; border-radius: 100%; } .menu__right div { width: 50%; height: 2px; background-color: #111; } .intro { position: fixed; z-index: 1000; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; font-size: var(--fontSizeIntro); transform-origin: top; } .intro__red { position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; background-color: #f21010; font-family: var(--font1); font-size: 30vw; font-weight: 900; line-height: 30vh; overflow: hidden; color: transparent; text-align: center; -webkit-text-stroke: 1px #222; transform: scaleY(0); transform-origin: bottom; } .intro__red div { transform: scaleX(0.5) scaleY(1.5); letter-spacing: -1vw; } .clip { position: relative; width: 100vw; height: 100vh; } .clip__inner { width: 90vw; height: 90vh; } .clip h1, .clip .h1__stroke { position: absolute; z-index: 1; top: 50%; left: 50%; width: 100%; font-family: "Bebas Neue"; font-size: var(--fontSizeH1); font-weight: 400; text-align: center; text-transform: uppercase; letter-spacing: -.75vw; line-height: 80%; margin: 0; overflow: hidden; transform: translate(-50%, -50%) scaleY(2); } .clip h1 span, .clip .h1__stroke span { display: inline-block } .clip .h1__stroke { z-index: 3; color: transparent; -webkit-text-stroke: 1px #fff; } .clip p { position: absolute; bottom: 20px; left: 50%; width: 50vw; font-size: var(--fontSizeP); text-align: center; transform: translateX(-50%); } .clip p a { color: #fff; } .clip figure { position: absolute; z-index: 2; top: 50%; left: 50%; width: 40vw; height: auto; margin: 0; padding: 0; aspect-ratio: 1/1; transform: translate(-60%, -50%) scaleX(-1); clip-path: url(#svgClipPath); } .clip figure video { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; object-fit: cover; transform: translate(-50%, -50%); } .clip__bg { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3vw; overflow: hidden; } .cursor { position: fixed; z-index: 1000; top: 0; left: 0; width: 6vw; height: auto; aspect-ratio: 10/4; color: #000; font-family: "Anton"; font-size: 1.5vw; pointer-events: none; transform: translate(-50%, -50%) scale(0); } .cursor::after { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: #f21010; border-radius: 100%; transform: rotate(-15deg); } .noise { position: fixed; z-index: 1001; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; background-image: url("//repo.bfw.wiki/bfwrepo/images/3d/noise.png"); } @media (min-width: 1550px) { :root { --fontSizeMenu: 16px; --fontSizeP: 16px; } } @media (max-width: 1000px) { .intro__red div { transform: scaleY(4); } } @media (max-width: 600px) { :root { --fontSizeMenu: 11px; --fontSizeP: 11px; } .menu { width: 90vw; margin: 4vw 0; } .menu ul { gap: 0 2vw; } } </style> </head> <body > <main class="flex__col"> <nav class="menu flex"> <a href="#" c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0