前端基础：font-size(数字） 与 steps()的设置问题
本帖最后由 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 要怎么设置法？
我在数字里面 用引单括起来也不能用。
<!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>
我把上面的代码也复制到codepen，这里你们也可以到这个网址观看。这些代码和1楼是一样的。哪个方便就用哪个。
https://codepen.io/iwater/pen/zYxXYdw
第一个网址是阿拉伯数字
****************************
https://codepen.io/iwater/pen/XWJQWeR
第二个网址是汉字 加一个：letter-spacing:9px
<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 13:02 编辑
https://blog.csdn.net/kbx8916/article/details/52540160
https://blog.csdn.net/sforiz/article/details/43937237
似乎是跟数字的占位有关，我也不知道找的对不对，反正有啥方法可以放一个数字的占位和汉字一样呢？
比如说这么显示：
1 234567
而不是这么显示的：
1234567
数字就跟汉字一样占位，这样就能走完粉红格子了 本帖最后由 clearwater 于 2020-1-27 13:45 编辑
德古拉伯 发表于 2020-1-27 12:49
加一个：letter-spacing:9px
@德古拉伯
@alittlebear
谢谢两位大神的帮助。现在手上没有热心值，等今天晚一点或明天给您评分。（排队给，有一个能量，就先评一个）
:loveliness:{:1_921:} clearwater 发表于 2020-1-27 13:43
@德古拉伯
@alittlebear
{:1_924:}我也没帮到什么，只是给个思路而已，具体的方法还是那位大神给的{:1_893:} 老哥，有没有好的CSS博客之类推荐推荐 @alittlebear
太客气了。你一直很热心帮我查资料。以前我有悬赏区，我想搞一个PS签名，没有满意的答案，就随便挑一个。然后我自己想出的办法，更好。
后来，有一个大神明明知道我结帖了，还写一篇很长很长的而且很详细的方法教我。虽然他的方案还是没有我的好，不过我也是很感动，也给他好评。
一个帖，我一般会挑两个答案。如果人太多了，我就没法一一去评分辣。
@猪猪怪
没有呀。我是初学。您可以去开个主帖，这样有更多的人可以看到，贡献他们的答案。我这个帖已结帖了，也不一定会很多人都会打开了。
英文模式下的 字母，符号，数值字是字体大小的1/2 RemMai 发表于 2020-1-27 17:19
英文模式下的 字母，符号，数值字是字体大小的1/2
谢谢指教。
那么是不是 我前面设了font-size: 20px , 字母和数值就是10px?
默认字体是16px,默认字母和数值是：8px?
前面的德古大神说加一个letter-spacing: 9px , 10+9=19 还差1px? 之前我以为想明白了。不过您这么一说，我又迷糊了。
另外，签名里的图片和在水区撒币都是要有积分的。您的积分不够，所以不能设签名。要200积分才可以。具体，您可以点击屏幕的右上角，上面有用户组－－》点击用户组，您就可以看到自己的权限辣。
页:
[1]
2