gsap实现文字悬浮撕裂拆分粉末动画效果代码
代码语言:html
所属分类:悬停
代码描述:gsap实现文字悬浮撕裂拆分粉末动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @font-face { font-family: "Anybody"; src: url("https://assets.codepen.io/1492907/Anybody.woff2") format("woff2"); } * { font-family: "Anybody"; margin: 0; } ::-moz-selection { background: #0e0e0e; color: #f0f0f0; } ::selection { background: #0e0e0e; color: #f0f0f0; } h1 { padding: 4rem; filter: url(#distortionFilter); font-size: calc(100vw / 24 * 3); color: #0e0e0e; font-variation-settings: "wght" 700; } @media (max-width: 800px) { h1 { font-size: 8rem; } } svg { position: absolute; width: 0; height: 0; left: -9999px; pointer-events: none; } body { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #f0f0f0; } a { position: absolute; bottom: 0; left: 0; padding: 2rem; color: #0e0e0e; text-decoration: none; } a:last-of-type { right: 0; left: unset; } </style> </head> <body > <h1>Solid</h1> <svg class="distort"> <filter id="distortionFilter"> <feTurbulence type="fractalNoise" baseFrequency="2.01 .01" numOctaves="5" seed="2" stitchTiles="noStitch" x="0%" y="0%" width="100%" height="100%" result="noise"></feTurbulence>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0