大致思路：
使用相对定位的div覆盖文本内容，并用animation控制宽度，位置。
换行步骤在外层div上控制高度即可。
css的steps与animation一起使用可以控制文字单个显示，类似于文本输入，不过显示频率是线性。
添加一些css变量控制步骤宽度、高度和时间等，便于vue中也通过组件的props控制
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>春江花月夜 唐·张若虚</title>
6 <style type="text/css">
7 body {
8 margin: 0;
9 }
10
11 div.step {
12 --step-width: 16em;
13 --start-step-height: 5em;
14 --end-step-height: 41em;
15 --step-row-count: 18;
16 --step-row-second: 4s;
17 --step-column-count: 16;
18 --step-column-second: 4s;
19 --animation-text-flicker-time: 0.3s;
20
21 position: relative;
22 width: var(--step-width);
23 height: var(--start-step-height);
24 margin: 0 auto;
25 font-size: 14px;
26 overflow: hidden;
27 animation: addHeight calc(var(--step-row-second) * var(--step-row-count)) steps(var(--step-row-count), jump-start) 0s forwards;
28 }
29 .step h1,h4 {
30 margin: 0.5em 0;
31 text-align: center;
32 line-height: 1;
33 }
34 .step p {
35 line-height: 1;
36 }
37 .step .hide {
38 position: absolute;
39 left: 0em;
40 top: calc(var(--start-step-height) + 1em);
41 width: var(--step-width);
42 height: 1em;
43 background-color: #fff;
44 z-index: 1;
45 animation: toRight var(--step-column-second) steps(var(--step-column-count), jump-start) infinite, toBootomOne calc(var(--step-row-second) * var(--step-row-count)) steps(var(--step-row-count), jump-start) var(--step-column-second) forwards, hide 0s calc(var(--step-row-second) * var(--step-row-count)) forwards;
46 }
47 .step .hide::before {
48 position: absolute;
49 width: 2px;
50 height: 1em;
51 top: 0;
52 left: 1px;
53 background-color: #000;
54 animation: text var(--animation-text-flicker-time) infinite;
55 content: '';
56 }
57
58 @keyframes toRight {
59 0% {}
60 100% { left: var(--step-width);width: 0; }
61 }
62 @keyframes toBootomOne {
63 0% {}
64 100% { top: calc(var(--end-step-height) + 1em); }
65 }
66 @keyframes addHeight {
67 0% {}
68 100% { height: var(--end-step-height); }
69 }
70 @keyframes text {
71 0% {}
72 100% { width: 0px; }
73 }
74 @keyframes hide {
75 0% {}
76 100% { display: none; }
77 }
78 </style>
79 </head>
80 <body>
81 <div class="step">
82 <h1>春江花月夜</h1>
83 <h4>唐·张若虚</h4>
84 <p>春江潮水连海平，海上明月共潮生。</p>
85 <p>滟滟随波千万里，何处春江无月明！</p>
86 <p>江流宛转绕芳甸，月照花林皆似霰；</p>
87 <p>空里流霜不觉飞，汀上白沙看不见。</p>
88 <p>江天一色无纤尘，皎皎空中孤月轮。</p>
89 <p>江畔何人初见月？江月何年初照人？</p>
90 <p>人生代代无穷已，江月年年望相似。</p>
91 <p>不知江月待何人，但见长江送流水。</p>
92 <p>白云一片去悠悠，青枫浦上不胜愁。</p>
93 <p>谁家今夜扁舟子？何处相思明月楼？</p>
94 <p>可怜楼上月裴回，应照离人妆镜台。</p>
95 <p>玉户帘中卷不去，捣衣砧上拂还来。</p>
96 <p>此时相望不相闻，愿逐月华流照君。</p>
97 <p>鸿雁长飞光不度，鱼龙潜跃水成文。</p>
98 <p>昨夜闲潭梦落花，可怜春半不还家。</p>
99 <p>江水流春去欲尽，江潭落月复西斜。</p>
100 <p>斜月沉沉藏海雾，碣石潇湘无限路。</p>
101 <p>不知乘月几人归，落月摇情满江树。</p>
102 <div class="hide"></div>
103 </div>
104 </body>
105 </html>我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？
我试图在索引页中创建一个超链接，但它没有显示，也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线，我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article