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

最新推荐文章于 2022-09-26 09:30:43 发布

秃了秃噜头

最新推荐文章于 2022-09-26 09:30:43 发布

阅读量264

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_54719957/article/details/115388105

版权

直接上代码
这个程序贼有趣
像打字机把一个字一个字打出来
不通过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;
然后找一个好看的布局，本人是把它放在正中间
如果在网页设计中可以根据网页进行定位
我们为了美观，就要设置汉字大小，汉字个数乘以大小就等于宽度，盒子高度要大于汉字高度，这是我们设计中必须要调试和计算的内容。
这个小窍门学废了么= =
宁外，博主也是个大帅币。
在这里插入图片描述

秃了秃噜头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
动画里的打字机模式小技巧

直接上代码这个程序贼有趣像打字机把一个字一个字打出来不通过js也能完成动态效果，这也是css的好处哈 <style> @keyframes w { 0% { width: 0; } 100% { width: 900px; } } div {
复制链接

扫一扫