几个文本倒影（可再细加工）

马黑黑

花潮論壇好風光

花潮論壇好風光

花潮論壇好風光

花潮論壇好風光

马黑黑

1. <style>
   
2. .myDiv {
   
3.         margin: auto; padding: 20px;
   
4.         width: 740px; height: 560px;
   
5.         background: teal;
   
6. }
   
7. .txtBox {
   
8.         width: fit-content;
   
9.         color: gold;
   
10.         font: bold 3em sans-serif;
    
11.         text-shadow: 1px 1px 2px gray, 2px 2px 4px gray;
    
12.         -webkit-box-reflect: below 0 linear-gradient(transparent,rgba(0,0,0,.35));
    
13. }
    
14. .txtBox1 {
    
15.         margin-top: 60px;
    
16.         -webkit-box-reflect: below 0 repeating-radial-gradient(transparent ,rgba(0,0,0,.75) 10px);
    
17. }
    
18. .txtBox2 {
    
19.         margin-top: 60px;
    
20.         -webkit-box-reflect: below 0 repeating-linear-gradient(transparent ,rgba(0,0,0,.75) 5px);
    
21. }
    
22. .txtBox3 {
    
23.         margin-top: 60px;
    
24.         -webkit-box-reflect: below 0 repeating-conic-gradient(transparent ,rgba(0,0,0,.75) 2deg);
    
25. }
    
26. </style>
    
27. 
    
28. <div class="myDiv">
    
29.         <div class="txtBox">花潮論壇好風光</div>
    
30.         <div class="txtBox txtBox1">花潮論壇好風光</div>
    
31.         <div class="txtBox txtBox2">花潮論壇好風光</div>
    
32.         <div class="txtBox txtBox3">花潮論壇好風光</div>
    
33. </div>

复制代码

加林森

跟到老黑学习真好！

马黑黑

加林森 发表于 2022-5-28 12:58
跟到老黑学习真好！

实际使用时要调整数据，我这是只是给出实现方法

加林森

马黑黑 发表于 2022-5-28 13:08
实际使用时要调整数据，我这是只是给出实现方法

嗯嗯，明白的。

红影

不同的滤镜，效果也不同呢。最喜欢第一个

红影

这个box-reflect元素倒是可以给水面上的船儿做倒影了呢。

红影

最后一个最奇特，带点发散的感觉。

红影

这样放在一起对比着看真好，能很直观地感受不同滤镜下的各种效果

马黑黑

红影 发表于 2022-5-28 15:53
这样放在一起对比着看真好，能很直观地感受不同滤镜下的各种效果

遮罩方式可扩展性很强

马黑黑

红影 发表于 2022-5-28 15:51
这个box-reflect元素倒是可以给水面上的船儿做倒影了呢。

完全可以

马黑黑

红影 发表于 2022-5-28 15:50
不同的滤镜，效果也不同呢。最喜欢第一个

第一个自然

马黑黑

红影 发表于 2022-5-28 15:53
最后一个最奇特，带点发散的感觉。

用的是角向渐变

加林森

来学习

东篱闲人

这个漂亮！

马黑黑

东篱闲人 发表于 2022-5-28 18:57
这个漂亮！

和你的ps字体比差远了