前端基础：font-size(数字）与 steps()的设置问题

clearwater · 发表于 2020-1-27 12:13

本帖最后由 clearwater 于 2020-1-27 17:29 编辑

拜托水神和毒舌绕路。谢谢辣

我在跟XX的前端视频教程学习，现在复习到关于animation的参数step() 应用这个小节。下面的代码是基本上照抄视频的。

视频中老师把一个盒子的动画
100%时宽度设为200px,
animation-timing-function设为step(10),
最关键的里面的汉字“世纪佳缘我在这里等你，一共10个汉字）设font-size: 20px (这样的话，每走一步，就跳出一个汉字，象打字机一样。 10步*20px = 200px （宽）

不过我把里面的汉字换成数字”1，2，3... 9, 1"里， font-size的20px就不能起作用辣，不能让数字刚刚好走完200px的粉红盒子。请问如果我要让一步跳一个阿拉伯数字，每个数字的宽为20px 要怎么设置法？
我在数字里面用引单括起来也不能用。

[Asm] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            white-space: nowrap;
            animation: steps 4s steps(10) forward;
        }
        
        @keyframes steps {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div>1234567891</div>
</body>

</html>

clearwater · 发表于 2020-1-27 12:24

我把上面的代码也复制到codepen，这里你们也可以到这个网址观看。这些代码和1楼是一样的。哪个方便就用哪个。

https://codepen.io/iwater/pen/zYxXYdw

第一个网址是阿拉伯数字
****************************
https://codepen.io/iwater/pen/XWJQWeR
第二个网址是汉字

德古拉伯 · 发表于 2020-1-27 12:49

加一个：letter-spacing:9px

[HTML] 纯文本查看 复制代码

<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            font-size: 20px;
            height: 30px;
            background-color: pink;
            white-space: nowrap;
            animation: steps 4s steps(10) forwards;
            letter-spacing: 9px;
            width: 200px;
            text-align: center;
        }
         
        @keyframes steps {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>
 
<body>
    <div>1234567891</div>
</body>
 
</html>

alittlebear · 发表于 2020-1-27 12:59

本帖最后由 alittlebear 于 2020-1-27 13:02 编辑

https://blog.csdn.net/kbx8916/article/details/52540160
https://blog.csdn.net/sforiz/article/details/43937237

似乎是跟数字的占位有关，我也不知道找的对不对，反正有啥方法可以放一个数字的占位和汉字一样呢？

比如说这么显示：
1 2 3 4 5 6 7

而不是这么显示的：
1234567

数字就跟汉字一样占位，这样就能走完粉红格子了

clearwater · 发表于 2020-1-27 13:43

本帖最后由 clearwater 于 2020-1-27 13:45 编辑

德古拉伯发表于 2020-1-27 12:49
加一个：letter-spacing:9px
[mw_shl_code=html,true]

@德古拉伯
@alittlebear

谢谢两位大神的帮助。现在手上没有热心值，等今天晚一点或明天给您评分。（排队给，有一个能量，就先评一个）

alittlebear · 发表于 2020-1-27 13:47

clearwater 发表于 2020-1-27 13:43
@德古拉伯
@alittlebear

我也没帮到什么，只是给个思路而已，具体的方法还是那位大神给的

猪猪怪 · 发表于 2020-1-27 14:09

老哥，有没有好的CSS博客之类推荐推荐

clearwater · 发表于 2020-1-27 14:33

@alittlebear
太客气了。你一直很热心帮我查资料。以前我有悬赏区，我想搞一个PS签名，没有满意的答案，就随便挑一个。然后我自己想出的办法，更好。
后来，有一个大神明明知道我结帖了，还写一篇很长很长的而且很详细的方法教我。虽然他的方案还是没有我的好，不过我也是很感动，也给他好评。

一个帖，我一般会挑两个答案。如果人太多了，我就没法一一去评分辣。

@猪猪怪
没有呀。我是初学。您可以去开个主帖，这样有更多的人可以看到，贡献他们的答案。我这个帖已结帖了，也不一定会很多人都会打开了。

RemMai · 发表于 2020-1-27 17:19

英文模式下的字母，符号，数值字是字体大小的1/2

clearwater · 发表于 2020-1-27 17:28

RemMai 发表于 2020-1-27 17:19
英文模式下的字母，符号，数值字是字体大小的1/2

谢谢指教。

那么是不是我前面设了font-size: 20px , 字母和数值就是10px?

默认字体是16px, 默认字母和数值是：8px?

前面的德古大神说加一个letter-spacing: 9px , 10+9=19 还差1px? 之前我以为想明白了。不过您这么一说，我又迷糊了。

另外，签名里的图片和在水区撒币都是要有积分的。您的积分不够，所以不能设签名。要200积分才可以。具体，您可以点击屏幕的右上角，上面有用户组－－》点击用户组，您就可以看到自己的权限辣。

帐号		自动登录	找回密码
密码			注册[Register]

[求助] 前端基础：font-size(数字）与 steps()的设置问题

免费评分

免费评分

免费评分

免费评分

免费评分

[求助] 前端基础：font-size(数字） 与 steps()的设置问题

免费评分

免费评分

免费评分

免费评分

免费评分

[求助] 前端基础：font-size(数字）与 steps()的设置问题