tailwind+gsap实现炫酷字符加密解密动画效果代码

代码语言:html

所属分类:其他

代码描述:tailwind+gsap实现炫酷字符加密解密动画效果代码

代码标签: tailwind gsap 炫酷 字符 加密 解密 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  



  
  
</head>

<body translate="no">
  <section class="relative w-full h-screen overflow-hidden text-xs font-semibold bg-black text-white/30">
          

            <div class="absolute top-2/4 left-1/2 -translate-1/2 z-50 flex flex-col items-center gap-5">
                  <!-- Headline -->
                  <h1 class="text-4xl md:text-6xl font-bold text-zinc-100 text-center mb-8 w-14/10 max-w-150">Encrypt Your Ideas with GSAP</h1>
                  <div class="relative w-60 bg-white text-black border border-black shadow-lg shadow-white/30 hover:shadow-white/50 py-5 px-4 rounded-4xl overflow-hidden scale-150 hover:scale-160 duration-200">
                        <span id="scrambleText" class="select-none">*&@#$#@#$@*&$(@#^)</span>
                        <button
                              id="toggleBtn"
                              type="button"
                              .........完整代码请登录后点击上方下载按钮下载查看

网友评论0