快救救你裂开的小尾巴!(变相实现在小尾巴上显示文字)

  • 你可能看到过这种小尾巴:

我的小尾巴

  • 仔细观察,就会发现其是在这个网站制作的:
    https://readme-typing-svg.demolab.com/
  • 那么,既然可以基于 SVG 显示动态文字,为什么不试试静态文字呢?
  • 注: 动态文字 SVG 使用 JavaScript 实现,也就是说其实是在客户端渲染。
    本质上与徽章小尾巴无异。

  • 没错,这段文字完全没有动。或者说……基本上没有动?
    仔细看看参数:
<img src="https://readme-typing-svg.demolab.com?font=Fira+Code&duration=0.1&color=F796F2EE&repeat=false&width=435&lines=%E5%B0%8F%E7%84%B0%E2%80%A6%E2%80%A6%E7%BB%88%E4%BA%8E%E5%8F%AB%E6%88%91%E7%9A%84%E5%90%8D%E5%AD%97%E4%BA%86%E5%91%A2%E2%80%A6%E2%80%A6%E5%A5%BD%E5%BC%80%E5%BF%83%E5%95%8A%E2%80%A6%E2%80%A6"></img>
  • 没错,你会发现一个 duration=0.1,也就是在每个文字显示之前停顿 0.1ms。
    嗯,0.1 毫秒,基本上可以忽略不计了。
    除此之外,本域名在中国大陆访问几乎完全没有障碍。
  • 所以说,如果你需要文字小尾巴,根据这个来填写就可以了:
https://readme-typing-svg.demolab.com?font=Fira+Code&duration=0.1&color=<八位十六进制颜色代码>&repeat=false&multiline=true&width=435&height=<高度>&lines=<文字>
  • 如果需要不止一行的话,把 <文字> 改为 <第一行文字>;<第二行文字> 即可。
    如果发现显示不全,可以把 <高度> 从 50 往上增加。
  • 我也很想用 SVG 的方式实现直接引用站内数据,可惜无论是小尾巴的设置还是帖子都无法直接插入代码式 SVG。

24 个赞

我怎么记得签名不允许用动图呢(

1 个赞

马克 :hedgehog:

1 个赞

话说签名不允许动图 :tieba_022:

3 个赞

签名动图是始皇明令禁止的,佬友们要注意啊

2 个赞

我记得不允许的是 GIF,SVG 也是通过 JavaScript 的方式在客户端实现动态文字,也就是说其实是静态图片,本质不能算动图吧。
真要这么说的话,一堆人的徽章小尾巴也算动图。(*/ω\*)

1 个赞

试试

:tieba_022: 动图不是特指,初衷是为了减少 混乱、加载负担和图片体积

1 个赞

图片体积(SVG 一般不大)和加载负担(只是一个 JS)我认为倒算不上,你总不能告诉我一个在动的文字就混乱了吧,因为好多人在用这个……

手机浏览器放到最大之后再用无障碍模式中的放大镜放大之后感觉字在颤抖 :upside_down_face:

1 个赞

你只考虑了个体啊 始皇是考虑论坛整体的情况 如果是满屏的 你说是吧~

不过好多人用 可能始皇也管不过来了吧 之前是处理过一批(也有可能放开了)

2 个赞

可能是心理作用?不过《魔法少女小圆》原作这里也的确很刀就是了。

1 个赞

不要啊!我就要裂开

1 个赞

我的小尾巴还在吗?

15 个赞

还在。

1 个赞

看看裂开不。

2 个赞

没裂开,虽说用的不是我的办法

1 个赞

佬,你这个是怎么生成的

1 个赞

佬们分享的,你拿这个改改https://iconce.com/api/v1?type=text&w=450&h=35&value=🍔多点关心多点爱,吃个同事补补钙&animate=true&fillType=Linear&primaryColor=%239D57F2&secondaryColor=%2342A3BD&angle=45&radialGlare=false&radius=8&strokeSize=0&strokeColor=%23FFFFFF&strokeOpacity=100&color=%23FFFFFF&size=16&family=cursive

2 个赞

感谢,我去看看