css实现打字动画效果代码-html代码-BFW代码库

css实现打字动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现打字动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap" rel="stylesheet">


    <style>
        body {
          background: #182028;
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 100vh;
          margin: 0;
        }
        
        h1 {
          font-size: 9vmin;
          color: #8bf;
          text-align: left;
          font-family: Lato, sans-serif;
          font-weight: 700;
          margin: 1rem 0 1rem 2rem;
        }
        
        /* Typewriter effect 1 */
        @keyframes typing {
          0.0000%, 27.3488% { content: ""; }
          1.1395%, 26.2093% { content: "d"; }
          2.2791%, 25.0698% { content: "de"; }
          3.4186%, 23.9302% { content: "dev"; }
          4.5581%, 22.7907% { content: "deve"; }
          5.6977%, 21.6512% { content: "devel"; }
          6.8372%, 20.5116% { content: "develo"; }
          7.9767%, 19.3721% { content: "develop"; }
          9.1163%, 18.2326% { content: "develope"; }
          10.2558%, 17.0930% { content: "developer"; }
        
          30.7674%, 51.2791% { content: ""; }
          31.9070%, 50.1395% { content: "w"; }
.........完整代码请登录后点击上方下载按钮下载查看