SplitText+gsap实现文字字母拆开模糊入场动画效果代码
代码语言:html
所属分类:动画
代码描述:SplitText+gsap实现文字字母拆开模糊入场动画效果代码
代码标签: SplitText gsap 文字 字母 拆开 模糊 入场 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600&display=swap'> <style> html, body { height: 100%; } body { display: grid; place-items: center; font: 600 100%/1 "Josefin Sans", sans-serif; background-color: #000; } .heading { font-size: clamp(5rem, 16vw, 16.5rem); color: #fff; text-align: center; text-transform: uppercase; transform-origin: 50% 50%; padding-top: 0.5em; } .heading > div { transform-origin: 50% 100%; overflow: hidden; } </style> </head> <body translate="no"> <h1 class="heading" aria-label="nebula"> bfw </h1> <script type="text/.........完整代码请登录后点击上方下载按钮下载查看
网友评论0