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);
  .........完整代码请登录后点击上方下载按钮下载查看