马黑黑 发表于 2022-4-15 12:46
会有办法的
嗯嗯，我多看看{:4_173:}
红影 发表于 2022-4-15 13:41
嗯嗯，我多看看
我看行
马黑黑 发表于 2022-4-15 17:55
我看行
谢谢黑黑的信任{:4_187:}
红影 发表于 2022-4-15 19:59
谢谢黑黑的信任
不客气的
马黑黑 发表于 2022-4-15 20:44
不客气的
今天都16号了，4月份过去了一半，这个4月太特别了，天天闷家里。
红影 发表于 2022-4-16 21:47
今天都16号了，4月份过去了一半，这个4月太特别了，天天闷家里。
再坚持几天
本帖最后由 马黑黑 于 2022-4-16 23:39 编辑 <br /><br /><style>
.txtBox {
margin: auto;
padding: 0 8px;
width: 400px;
height: 520px;
background-image: linear-gradient(#fff 25px, #ed8181db 0);
background-size: 26px 26px;
font: 14px / 26px Sans-serif;
}
</style>
<div class="txtBox">
<span style="font-size: 16px; font-weight: bold; color: red;">稿纸样式一：由CSS线性渐变背景模拟</span><br>
代码将放在下楼。这里讲几个问题：<br>一、实现原理
<br> 设置linear-gradient线性背景，将行高与background-size设为相同，每一行文本就会垂直居中于格子中。稿纸的线条颜色可自由更改，当然还可以更改稿纸的尺寸、文本的大小。<br>二、注意事项<br> ①稿纸里的文本，不建议使用段落标签<p>...</p>，手动分行请用一个<br>标签，分两行用两个<br>，需要对齐文本的可以使用div标签。<br> ②文字大小建议在 14px 上下，浮动不宜太大，除非知道如果更改稿纸的每行高度。<br> ③需要设置特定文本样式，如颜色、粗细等，请用<span>...</span>标签，举个栗子：<br><span style="color: red;">红色文本</span><br><br> CSS模拟稿纸估计有一些，但应用并不广泛，我编写的这个估计找不到相同的例子。我认为它是可以一用的。<br><br>
<div style="text-align: right;">马黑黑 2022年4月16日 </div>
</div>
本帖最后由 马黑黑 于 2022-4-16 23:41 编辑
上楼代码：
<style>
.txtBox {
margin: auto;
padding: 0 8px;
width: 400px;
height: 520px;
background-image: linear-gradient(#fff 25px, #ed8181db 0);
background-size: 26px 26px;
font: 14px / 26px Sans-serif;
}
</style>
<div class="txtBox">文本</div>
马黑黑 发表于 2022-4-16 22:12
上楼代码：
黑黑辛苦了{:4_187:}
红影 发表于 2022-4-18 15:01
黑黑辛苦了
尝试着玩玩，不辛苦
马黑黑 发表于 2022-4-18 19:16
尝试着玩玩，不辛苦
从黑黑这里知道了好多玩法，真好{:4_187:}
红影 发表于 2022-4-18 21:57
从黑黑这里知道了好多玩法，真好
一同玩玩
马黑黑 发表于 2022-4-18 22:10
一同玩玩
这段时间玩不了，人被封着，仿佛精神也封了一样，只想着衣食住行了。{:4_203:}
红影 发表于 2022-4-19 20:46
这段时间玩不了，人被封着，仿佛精神也封了一样，只想着衣食住行了。
理解
马黑黑 发表于 2022-4-19 20:52
理解
我前两天下单团购的，天天看群盯着，结果结果今天被退款说东西没了。被退了2个，还有几个没拿到的，希望不会被退款才好。
红影 发表于 2022-4-20 19:40
我前两天下单团购的，天天看群盯着，结果结果今天被退款说东西没了。被退了2个，还有几个没拿到的，希望 ...
多留一点
收集了倒影文本
本帖最后由 马黑黑 于 2022-9-2 22:11 编辑 <br /><br /><style>
#mama { margin: auto; width: 500px; height: 200px; }
.text{ font-size: 64px; font-weight: bold; fill: none; stroke-width: 2px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; }
.text-1{ stroke: #3498db; text-shadow: 0 0 5px #3498db; animation-delay: -1.5s; }
.text-2{ stroke: #f39c12; text-shadow: 0 0 5px #f39c12; animation-delay: -3s; }
.text-3{ stroke: #e74c3c; text-shadow: 0 0 5px #e74c3c; animation-delay: -4.5s; }
.text-4{ stroke: #9b59b6; text-shadow: 0 0 5px #9b59b6; animation-delay: -6s; }
@keyframes stroke { to { stroke-dashoffset: -400; } }
</style>
<div id="mama">
<svg width="100%" height="100%" style="border: 1px solid">
<text text-anchor="middle" x="50%" y="50%" class="text text-1">花潮论坛</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-2">花潮论坛</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-3">花潮论坛</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-4">花潮论坛</text>
</svg>
</div>
本帖最后由 马黑黑 于 2022-9-2 22:11 编辑
438楼代码：<style>
#mama { margin: auto; width: 500px; height: 200px; }
.text{ font-size: 64px; font-weight: bold; fill: none; stroke-width: 2px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; }
.text-1{ stroke: #3498db; text-shadow: 0 0 5px #3498db; animation-delay: -1.5s; }
.text-2{ stroke: #f39c12; text-shadow: 0 0 5px #f39c12; animation-delay: -3s; }
.text-3{ stroke: #e74c3c; text-shadow: 0 0 5px #e74c3c; animation-delay: -4.5s; }
.text-4{ stroke: #9b59b6; text-shadow: 0 0 5px #9b59b6; animation-delay: -6s; }
@keyframes stroke { to { stroke-dashoffset: -400; } }
</style>
<div id="mama">
<svg width="100%" height="100%" style="border: 1px solid">
<text text-anchor="middle" x="50%" y="50%" class="text text-1">花潮论坛</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-2">花潮论坛</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-3">花潮论坛</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-4">花潮论坛</text>
</svg>
</div>
438楼文本效果简单解释：
利用 svg 的 stroke-dasharray 实现文本线段描边，再用 stroke-dashoffset 对线段进行偏移，最后使用CSS的多个异步关键帧动画营造出炫酷的霓虹灯文本效果。