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"; }
          33.0465%, 49.0000% { content: "wr"; }
          34.1860%, 47.8605% { content: "wri"; }
          35.3256%, 46.7209% { content: "writ"; }
          36.4651%, 45.5814% { content: "write"; }
          37.6047%, 44.4419% { content: "writer"; }
        
          54.6977%, 75.2093% { content: ""; }
          55.8372%, 74.0698% { content: "r"; }
          56.9767%, 72.9302% { content: "re"; }
          58.1163%, 71.7907% { content: "rea"; }
          59.2558%, 70.6512% { content: "read"; }
          60.3953%, 69.5116% { content: "reade"; }
          61.5349%, 68.3721% { content: "reader"; }
        
          78.62.........完整代码请登录后点击上方下载按钮下载查看