gsap+SplitText实现文字字母拆分带阴影上下跳跃显示动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap+SplitText实现文字字母拆分带阴影上下跳跃显示动画效果代码
代码标签: gsap SplitText 文字 字母 拆分 跳动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@900&family=Quicksand:wght@700&display=swap" rel="stylesheet"> <style> body, html { height: 100%; display: grid; background: linear-gradient(180deg, rgb(0, 172, 193), rgb(6, 66, 115)); } p { margin: auto; font-family: "Alegreya Sans SC", sans-serif; text-align: center; font-size: 15vw; color: #fff; opacity: 0.8; line-height: 0.8em; } .word { display: block !important; } .char { opacity: 0; } </style> </head> <body> <p class="split">not waving but drowning</p> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script> <script type="text/javascript" src=.........完整代码请登录后点击上方下载按钮下载查看
网友评论0