重复线性渐变+背景裁切字体效果

马黑黑

huachao
HUACHAO
花潮论坛
花潮論壇

马黑黑

代码极简：

1. <style>
   
2. .mybox {
   
3.         margin: 20px auto;
   
4.         width: 400px;
   
5.         height: 200px;
   
6.         font: bold 2.4em sans-serif;
   
7.         color: transparent;
   
8.         background: repeating-linear-gradient(90deg, white 2px, navy 4px);
   
9.         -webkit-background-clip: text;
   
10.         position: relative;
    
11. }
    
12. </style>
    
13. 
    
14. <div class="mybox">huachao<br>HUACHAO<br>花潮论坛<br>花潮論壇</div>

复制代码

马黑黑

改变线性渐变角度，改变颜色，改变颜色终结点，甚至，改变 background-size，可营造更多神奇的效果

马黑黑

background-clip，目前Firefox和Chromium都支持，需要前缀 -webkit-

红影

就这么个竖排的条纹，竟然美的不可方物。太赞了

红影

因为文字的空间走向，让切割出来的条纹那么美的呢

红影

收藏起来，这个太美了

马黑黑

红影 发表于 2024-2-1 23:11
收藏起来，这个太美了

还可以的吧

马黑黑

红影 发表于 2024-2-1 23:09
就这么个竖排的条纹，竟然美的不可方物。太赞了

可以变换一下方向，如果熟悉背景制作，还可以加上复杂的多个渐变

马黑黑

红影 发表于 2024-2-1 23:11
因为文字的空间走向，让切割出来的条纹那么美的呢

美是一种感觉

红影

马黑黑 发表于 2024-2-1 23:41
还可以的吧

黑黑可以把这个也放入文字仓库里呢

红影

马黑黑 发表于 2024-2-1 23:42
可以变换一下方向，如果熟悉背景制作，还可以加上复杂的多个渐变

好像其他方向的见过的吧，就这个竖条纹的没见过

红影

马黑黑 发表于 2024-2-1 23:42
美是一种感觉

又去看了几遍，还是非常喜欢

马黑黑

红影 发表于 2024-2-2 10:24
又去看了几遍，还是非常喜欢

这些都是普通CSS属性的应用

马黑黑

红影 发表于 2024-2-2 10:24
好像其他方向的见过的吧，就这个竖条纹的没见过

横竖都好看

马黑黑

红影 发表于 2024-2-2 10:23
黑黑可以把这个也放入文字仓库里呢

仓库还有空间吗

红影

马黑黑 发表于 2024-2-2 17:51
这些都是普通CSS属性的应用

这个也可以做成簸箕的底纹吧

红影

马黑黑 发表于 2024-2-2 17:51
横竖都好看

是的，或者45度的也好看。

红影

马黑黑 发表于 2024-2-2 17:52
仓库还有空间吗

当然有啊，那诗歌内容丰富的大仓库呢

马黑黑

红影 发表于 2024-2-2 19:58
当然有啊，那诗歌内容丰富的大仓库呢

我又不懂诗歌仓库