css实现文字字母三维厚度波动动画效果代码-html代码-BFW代码库

css实现文字字母三维厚度波动动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现文字字母三维厚度波动动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @import url("https://fonts.googleapis.com/css2?family=Nabla:EDPT,EHLT@30..200,24&display=swap");
        body {
          margin: 0;
          height: 100vh;
          display: grid;
          place-content: center;
          background-color: #000;
        }
        
        h1 {
          font-size: 12vw;
          font-family: Nabla;
        }
        
        @font-palette-values --Nabla {
          font-family: Nabla;
          base-palette: 2;
        }
        span {
          -webkit-animation: depth 1s ease-in-out alternate infinite;
                  animation: depth 1s ease-in-out alternate infinite;
          position: relative;
          display: inline-block;
          font-variation-settings: "EDPT" 30;
          font-palette: --Nabla;
        }
        span:nth-child(1) {
          -webkit-animation-delay: 0.1s;
                  animation-delay: 0.1s;
        }
        span:nth-child(2) {
          -webkit-animation-delay: 0.2s;
                  animation-delay: 0.2s;
        }
        span:nth-child(3) {
          -webkit-animation-delay: 0.3s;
                  animation-delay: 0.3s;
        }
        span:nth-child(4) {
          -webkit-animation-delay: 0.4s;
                  animation-delay: 0.4s;
        }
        span:nth-child(5) {
          -webkit-animation-delay: 0.5s;
                  animation-delay: 0.5s;
        }
        span:nth-child(6) {
          -webkit-animation-delay: 0.6s;
                  animation-delay: 0.6s;
        }
    .........完整代码请登录后点击上方下载按钮下载查看