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); position: absolute; bottom: calc(var(--font-size) * 0.25); left: 0; width: 100%; height: calc(var(--font-size) * 0.1); opacity: 1; background-color: var(--shadow-color, black); border-radius: 100vmin; filter: blur(20px); } h1 { --layers: 10; --depth: 30; font-size: var(--font-size); } .particles { position: absolute; left: 50%; z-index: 1; transform: translatez(-50px); bottom: calc(var(--font-size) * 0.4); } .particles .floor { transform: rotatex(-60deg); } .particles .floor div { transform-style: preserve-3d; display: block; position: absolute; top: 0; left: 0; } .particles .floor div::after { content: ""; border: solid 1vmin var(--floor-particle, white); position: absolute; top: 0; left: 0; width: 8vmin; height: 8vmin; transform: translate(-50%, -50%); border-radius: 50%; } .style-1 { --color: #015779; --color-front: #35C4FD; --floor-particle: #35C4FD; background-color: #C5FCF9; } .style-2 { --color: white; --color-front: black; --floor-particle: black; background-color: yellow; } .style-2 [data-mod-3] { --color: black; } .style-3 { --color: #BB4430; --color-front: #7EBDC2; --floor-particle: #7EBDC2; background-color: #231F20; } .style-4 { --color: #B79492; --color-front: #EAE1DF; --floor-particle: #EAE1DF; --background-color: #917C78; } .style-5 { --color: #DB504A; --color-front: #E3B505; --floor-particle: #E3B505; background-color: #084C61; } .font-1 { font-family: "Bakbak One", cursive; } .font-2 { --depth: 10; font-family: "Chonburi", cursive; } .font-3 { font-family: "Graduate", cursive; } .font-4 { font-family: "Righteous", cursive; } </style> </head> <body> <div class="container"> <div class="shadow"></div> <div class="squish"> <h1 data-3d-text class="font-1">A</h1> </div> <div class="particles"> <div class="floor"></div> <div class="air"></div> </div> </div> <script type="module"> import { Those3DTexts } from "https://cdn.skypack.dev/that-3d-text-library"; import { gsap } from ".........完整代码请登录后点击上方下载按钮下载查看
网友评论0