动画里的打字机模式小技巧

用户8247415

发布于 2021-04-13 16:15:36

3540

发布于 2021-04-13 16:15:36

直接上代码这个程序贼有趣像打字机把一个字一个字打出来不通过js也能完成动态效果，这也是css的好处哈

  <style>
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 900px;
            }
        }
        
        div {
            margin: 0 auto;
            overflow: hidden;
            font-size: 100px;
            width: 0;
            height: 120px;
            white-space: nowrap;
            background-color: purple;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: w 2s steps(9) forwards;
        }
    </style>

<body>
    <div>程序猿是一个大帅比</div>
</body>

其中我们运用到了steps()属性程序设计思路：我们发现"程序猿是一个大帅比"是九个字，我们想一次出现一个，所以填9。我们想让所有汉字在一行上显示所以要用 white-space: nowrap; 多余部分要省略overflow: hidden; 然后找一个好看的布局，本人是把它放在正中间如果在网页设计中可以根据网页进行定位我们为了美观，就要设置汉字大小，汉字个数乘以大小就等于宽度，盒子高度要大于汉字高度，这是我们设计中必须要调试和计算的内容。这个小窍门学废了么= = 宁外，博主也是个大帅币。