几个文本倒影（可再细加工）
<style>.myDiv {
margin: auto; padding: 20px;
width: 740px; height: 560px;
background: teal;
}
.txtBox {
width: fit-content;
color: gold;
font: bold 3em sans-serif;
text-shadow: 1px 1px 2px gray, 2px 2px 4px gray;
-webkit-box-reflect: below 0 linear-gradient(transparent,rgba(0,0,0,.35));
}
.txtBox1 {
margin-top: 60px;
-webkit-box-reflect: below 0 repeating-radial-gradient(transparent ,rgba(0,0,0,.75) 10px);
}
.txtBox2 {
margin-top: 60px;
-webkit-box-reflect: below 0 repeating-linear-gradient(transparent ,rgba(0,0,0,.75) 5px);
}
.txtBox3 {
margin-top: 60px;
-webkit-box-reflect: below 0 repeating-conic-gradient(transparent ,rgba(0,0,0,.75) 2deg);
}
</style>
<div class="myDiv">
<div class="txtBox">花潮論壇好風光</div>
<div class="txtBox txtBox1">花潮論壇好風光</div>
<div class="txtBox txtBox2">花潮論壇好風光</div>
<div class="txtBox txtBox3">花潮論壇好風光</div>
</div>
<style>
.myDiv {
margin: auto; padding: 20px;
width: 740px; height: 560px;
background: teal;
}
.txtBox {
width: fit-content;
color: gold;
font: bold 3em sans-serif;
text-shadow: 1px 1px 2px gray, 2px 2px 4px gray;
-webkit-box-reflect: below 0 linear-gradient(transparent,rgba(0,0,0,.35));
}
.txtBox1 {
margin-top: 60px;
-webkit-box-reflect: below 0 repeating-radial-gradient(transparent ,rgba(0,0,0,.75) 10px);
}
.txtBox2 {
margin-top: 60px;
-webkit-box-reflect: below 0 repeating-linear-gradient(transparent ,rgba(0,0,0,.75) 5px);
}
.txtBox3 {
margin-top: 60px;
-webkit-box-reflect: below 0 repeating-conic-gradient(transparent ,rgba(0,0,0,.75) 2deg);
}
</style>
<div class="myDiv">
<div class="txtBox">花潮論壇好風光</div>
<div class="txtBox txtBox1">花潮論壇好風光</div>
<div class="txtBox txtBox2">花潮論壇好風光</div>
<div class="txtBox txtBox3">花潮論壇好風光</div>
</div>
跟到老黑学习真好！{:4_199:} 加林森 发表于 2022-5-28 12:58
跟到老黑学习真好！
实际使用时要调整数据，我这是只是给出实现方法 马黑黑 发表于 2022-5-28 13:08
实际使用时要调整数据，我这是只是给出实现方法
嗯嗯，明白的。 不同的滤镜，效果也不同呢。最喜欢第一个{:4_187:} 这个box-reflect元素倒是可以给水面上的船儿做倒影了呢。 最后一个最奇特，带点发散的感觉。 这样放在一起对比着看真好，能很直观地感受不同滤镜下的各种效果{:4_199:} 红影 发表于 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:46 编辑 <br /><br />来学习 这个漂亮！{:5_116:} 东篱闲人 发表于 2022-5-28 18:57
这个漂亮！
和你的ps字体比差远了
页:
[1]