文字效果集中营

红影

马黑黑 发表于 2022-4-15 12:46
会有办法的

嗯嗯，我多看看

马黑黑

红影 发表于 2022-4-15 13:41
嗯嗯，我多看看

我看行

红影

马黑黑 发表于 2022-4-15 17:55
我看行

谢谢黑黑的信任

马黑黑

红影 发表于 2022-4-15 19:59
谢谢黑黑的信任

不客气的

红影

马黑黑 发表于 2022-4-15 20:44
不客气的

今天都16号了，4月份过去了一半，这个4月太特别了，天天闷家里。

马黑黑

红影 发表于 2022-4-16 21:47
今天都16号了，4月份过去了一半，这个4月太特别了，天天闷家里。

再坚持几天

马黑黑

稿纸样式一：由CSS线性渐变背景模拟
代码将放在下楼。这里讲几个问题：
一、实现原理
    设置linear-gradient线性背景，将行高与background-size设为相同，每一行文本就会垂直居中于格子中。稿纸的线条颜色可自由更改，当然还可以更改稿纸的尺寸、文本的大小。
二、注意事项
    ①稿纸里的文本，不建议使用段落标签<p>...</p>，手动分行请用一个<br>标签，分两行用两个<br>，需要对齐文本的可以使用div标签。
    ②文字大小建议在 14px 上下，浮动不宜太大，除非知道如果更改稿纸的每行高度。
    ③需要设置特定文本样式，如颜色、粗细等，请用<span>...</span>标签，举个栗子：
<span style="color: red;">红色文本</span>

    CSS模拟稿纸估计有一些，但应用并不广泛，我编写的这个估计找不到相同的例子。我认为它是可以一用的。

马黑黑 2022年4月16日    

马黑黑

上楼代码：

1. <style>
   
2. .txtBox {
   
3.         margin: auto;
   
4.         padding: 0 8px;
   
5.         width: 400px;
   
6.         height: 520px;
   
7.         background-image: linear-gradient(#fff 25px, #ed8181db 0);
   
8.         background-size: 26px 26px;
   
9.         font: 14px / 26px Sans-serif;
   
10. }
    
11. </style>
    
12. 
    
13. <div class="txtBox">文本</div>

复制代码

红影

马黑黑 发表于 2022-4-16 22:12
上楼代码：

黑黑辛苦了

马黑黑

红影 发表于 2022-4-18 15:01
黑黑辛苦了

尝试着玩玩，不辛苦

红影

马黑黑 发表于 2022-4-18 19:16
尝试着玩玩，不辛苦

从黑黑这里知道了好多玩法，真好

马黑黑

红影 发表于 2022-4-18 21:57
从黑黑这里知道了好多玩法，真好

一同玩玩

红影

马黑黑 发表于 2022-4-18 22:10
一同玩玩

这段时间玩不了，人被封着，仿佛精神也封了一样，只想着衣食住行了。

马黑黑

红影 发表于 2022-4-19 20:46
这段时间玩不了，人被封着，仿佛精神也封了一样，只想着衣食住行了。

理解

红影

马黑黑 发表于 2022-4-19 20:52
理解

我前两天下单团购的，天天看群盯着，结果结果今天被退款说东西没了。被退了2个，还有几个没拿到的，希望不会被退款才好。

马黑黑

红影 发表于 2022-4-20 19:40
我前两天下单团购的，天天看群盯着，结果结果今天被退款说东西没了。被退了2个，还有几个没拿到的，希望 ...

多留一点

马黑黑

收集了倒影文本

马黑黑

马黑黑

438楼代码：

1. <style>
   
2.         #mama { margin: auto; width: 500px; height: 200px; }
   
3.         .text{ font-size: 64px; font-weight: bold; fill: none; stroke-width: 2px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; }
   
4.         .text-1{ stroke: #3498db; text-shadow: 0 0 5px #3498db; animation-delay: -1.5s; }
   
5.         .text-2{ stroke: #f39c12; text-shadow: 0 0 5px #f39c12; animation-delay: -3s; }
   
6.         .text-3{ stroke: #e74c3c; text-shadow: 0 0 5px #e74c3c; animation-delay: -4.5s; }
   
7.         .text-4{ stroke: #9b59b6; text-shadow: 0 0 5px #9b59b6; animation-delay: -6s; }
   
8.         @keyframes stroke { to { stroke-dashoffset: -400; } }
   
9. </style>
   
10. 
    
11. <div id="mama">
    
12.         <svg width="100%" height="100%" style="border: 1px solid">
    
13.                 <text text-anchor="middle" x="50%" y="50%" class="text text-1">花潮论坛</text>
    
14.                 <text text-anchor="middle" x="50%" y="50%" class="text text-2">花潮论坛</text>
    
15.                 <text text-anchor="middle" x="50%" y="50%" class="text text-3">花潮论坛</text>
    
16.                 <text text-anchor="middle" x="50%" y="50%" class="text text-4">花潮论坛</text>
    
17.         </svg>
    
18. </div>

复制代码

马黑黑

438楼文本效果简单解释：

利用 svg 的 stroke-dasharray 实现文本线段描边，再用 stroke-dashoffset 对线段进行偏移，最后使用CSS的多个异步关键帧动画营造出炫酷的霓虹灯文本效果。