gsap实现按钮悬浮文字随机解码动画效果代码-html代码-BFW代码库

gsap实现按钮悬浮文字随机解码动画效果代码

代码语言：html

所属分类：悬停

代码描述：gsap实现按钮悬浮文字随机解码动画效果代码

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

html, body {
  margin:0;
  padding:0;
}

body {
  width:100vw;
  height:100vh;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  font-family: 'Share Tech Mono', monospace;
}

.codedText {
  padding:10px 15px;
  margin:15px;
  background:#000;
  color:#fff;
  text-align:center;
  white-space: nowrap;
  cursor:pointer;  
}
</style>


  
</head>

<body >
  <div class="codedText">Hello world</div>

<div class="codedText">TOP SECRET</div>

<div class="codedText fromRight">Gain Full Access »</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
      <script  >
document.querySelectorAll('.codedText').forEach(t => {
  const arr1 = t.innerHTML.split('');
  const arr2 = [];
  arr1.forEach((char, i) => arr2[i] = randChar()); //fill arr2 with random characters
  t.onpointe.........完整代码请登录后点击上方下载按钮下载查看