gsap+svg实现数字滚动动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap+svg实现数字滚动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://use.typekit.net/nac3qra.css"> <style> body { background-color: #02050A; overflow: hidden; text-align:center; display: flex; align-items: center; justify-content: center; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } svg { width: 100%; height: 100%; visibility: hidden; } #counter{ cursor: pointer; } text { font-family: moby-monospace, monospace; font-weight: 400; font-style: normal; font-size: 140px; user-select: none; font-weight: 700; fill: #01FFFF; /* stroke: #FFF; */ text-align: middle; } </style> </head> <body> <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"> <defs> <filter id="textDistort"> <feTurbulence id="turbulence" baseFrequency="-0 0.00218" type="fractalNoise" stitchTiles="stitch" numOctaves="3" seed="520" /> <feDisplacementMap in="SourceGraphic" scale="100" /> <!-- <feGaussianblur stdDeviation="0.7" > --> </feGaussianblur> </filter> <mask id="textGridMask"> <path id="maskGrid" d="M.5,964.79H1200.5M.5,959.79H1200.5M.5,954.79H1200.5M.5,949.79H1200.5M.5,944.79H1200.5M.5,939.79H1200.5M.5,934.79H1200.5M.5,929.7.........完整代码请登录后点击上方下载按钮下载查看
网友评论0