js+css实现文字字母拆分跳跃动画i效果代码-html代码-BFW代码库

js+css实现文字字母拆分跳跃动画i效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现文字字母拆分跳跃动画i效果代码

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Comfortaa:300,700|Bungee+Shade|Josefin+Sans:400&display=swap"/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Gochi+Hand&display=swap"/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap"/>
  
  
  
<style>
@layer reset, base, form, layout, transitions;



@layer transitions {
  @-webkit-keyframes fade-out {
    to {
      opacity: 0;
    }
  }
  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  @-webkit-keyframes scale-down {
    to {
      scale:0.75;
    }
  }

  @keyframes scale-down {
    to {
      scale:0.75;
    }
  }

  @-webkit-keyframes slide-in-up {
    0% {
      translate: 0 100%;
    }
  }

  @keyframes slide-in-up {
    0% {
      translate: 0 100%;
    }
  }

  :root {
    view-transition-name: none;
    --animation-fade-out: fade-out 0.5s cubic-bezier(0.25, 0, 0.3, 1);
    --animation-scale-down: scale-down 0.5s cubic-bezier(0.25, 0, 0.3, 1);
    --animation-slide-in-up: slide-in-up 0.5s cubic-bezier(0.25, 0, 0.3, 1);
  }

  .stage {
    view-transition-name: stage;
  }

  ::view-transition-old(stage) {
    -webkit-animation: var(--animation-fade-out), var(--animation-scale-down);
            animation: var(--animation-fade-out), var(--animation-scale-down);
  }

  ::view-transition-new(stage) {
    z-index: 1;
    -webkit-animation: var(--animation-fade-out) reverse, var(--animation-slide-in-up);
            animation: var(--animation-fade-out) reverse, var(--animation-slide-in-up);
  }
}

@layer layout {
  body {
    gap: 1rem;
  }

  .stage {
    font-size: 50vmin;
    text-align: center;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    margin: auto;
    inline-size: 60vmin;
    line-height: 1;
    text-transform: uppercase;
    font-family: "Bungee Shade";
  }
}

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@layer base {
  body {
    width: 100vw;
    min-height: 100vh;
    font-family: "Exo", "Bu.........完整代码请登录后点击上方下载按钮下载查看