css实现文字字母飞入入场动画效果代码-html代码-BFW代码库

css实现文字字母飞入入场动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现文字字母飞入入场动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>


        :root {
          padding: 0%;
          margin: 0%;
          box-sizing: border-box;
        
          /* variables */
          --white: #fff;
          --red: #ea4335;
          --green: #34a853;
          --yellow: #fbbc05;
          --speed: 2s;
        }
        body {
          display: grid;
          place-items: center;
          min-height: 100vh;
          overflow: hidden;
          background-color: var(--white);
        }
        h1 {
          margin: 0;
          font-size: 4rem;
          display: inline-flex;
          align-items: flex-start;
          flex-direction: column;
          line-height: 1.2;
          font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
        }
        span {
          display: flex;
        }
        #a {
          color: var(--red);
          background-color: white;
          animation-name: css;
          animation-duration: calc(var(--speed) / 4);
          animation-delay: 0s;
        }
        #b {
          color: var(--yellow);
          background-color: #fff;
          animation-name: css;
          animation-duration: calc(var(--speed) / 2);
        }
        #c {
          color: var(--green);
          animation-name: css;
          animation-duration: calc(var(--speed) / 1.4);
        }
        i {
          display: flex;
          position: absolute;
          height: 4rem;
          width: 9rem;
          background-color: white;
          z-index: -100;
          transform: translate(10rem, 0rem);
          animation: cursor var(--speed) ease-out;
        }
        .container {
          position: relative;
          display: block;
          padding: 1vmin;
          overflow: hidden;
        }
        @keyframes cursor {
          0% {
           .........完整代码请登录后点击上方下载按钮下载查看