anime实现一个文字loading加载动画效果代码-html代码-BFW代码库

anime实现一个文字loading加载动画效果代码

代码语言：html

代码描述：anime实现一个文字loading加载动画效果代码

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


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

<head>

  <meta charset="UTF-8">



<link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght,GRAD,YOPQ,YTUC@8..144,62.5,500,-200,45,600&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">


  
  
<style>
:root {
  --wght: 300;
  --wdth: 62.5;
  --GRAD: 230;
  --YOPQ: 80;
  --YTUC: 550;
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #fffe;
  background-color: #0f172e;
  opacity: 0.8;
  background-image: linear-gradient(#131e3c 1px, transparent 1px), linear-gradient(to right, #131e3c 1px, #0f172e 1px);
  background-size: 20px 20px;
  font-family: "Roboto Flex", sans-serif;
  transform: scale(0.25);
}
body .text-content {
  display: flex;
  transform: translateY(-150px);
  font-size: 8rem;
}
body .text-content > * {
  text-align: center;
  width: 160px;
  flex: 1;
  font-variation-settings: "wght" var(--wght), "wdth" var(--wdth), "GRAD" var(--GRAD), "YOPQ" var(--YOPQ), "YTUC" var(--YTUC);
}
</style>



</head>

<body >
  <div class="text-content">
  <span class="letter">L</span>
  <span class="letter">O</span>
  <span clas.........完整代码请登录后点击上方下载按钮下载查看