gsap+Those3DTexts实现三维字母文字跳动切换动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap+Those3DTexts实现三维字母文字跳动切换动画效果代码
代码标签: gsap Those3DTexts 三维 字母 文字 跳动 切换 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://cdn.skypack.dev/that-3d-text-library/lib/styles.css"); @import url("https://fonts.googleapis.com/css2?family=Bakbak+One&family=Caprasimo&family=Chonburi&family=Graduate&family=Righteous&display=swap"); :root { --font-size: clamp(100px, 40vmin, 200px); } html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; position: relative; } body { display: flex; align-items: flex-end; justify-content: center; perspective: 700px; } body::after { content: ""; position: absolute; background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); width: 100%; height: 45%; top: 0; left: 0; z-index: 1; } body > * { z-index: 2; } .container, .squish { transform-style: preserve-3d; position: relative; } .container { margin-bottom: calc(50vh - var(--font-size)); } .squish { z-index: 2; } .shadow { transform-style: flat; z-index: 1; transform: translatez(-30px); posi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0