anime实现文字字母悬浮变粗动画效果代码-html代码-BFW代码库

anime实现文字字母悬浮变粗动画效果代码

代码语言：html

所属分类：悬停

代码描述：anime实现文字字母悬浮变粗动画效果代码

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

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

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

<style>
@font-face {
  font-family: "IBM Plex Sans Roman";
  src: url("//repo.bfw.wiki/bfwrepo/font/IBMPlexSansVar-Roman.ttf");
}

body {
  font-family: "IBM Plex Sans Roman", Times;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  background-color: #DCEDC8;
}

#main-text {
  font-size: 136px;
  text-align: center;
}

.char {
  font-size: 136px;
  text-align: center;
  cursor: default;
  font-weight: 50;
  transition: all 0.05s linear;
}
</style>


  
</head>

<body>
  <div id="container" style="width:900px;margin: auto;--selected-row:1;--selected-char:5;"
     ><span id="main-text">Decentralized exchange infrastructure.</span></div>
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/anime.3.2.1.js"></script>
      <script  >
const container = document.getElementById("container");

const text = `Decentralized exchange infrastructure.`;

let chars = text.split(" ").map((word, lineIdx) => word.split("").map((char, charIdx) => {
  const child = document.createElement("span");
  chi.........完整代码请登录后点击上方下载按钮下载查看