文字效果集中营

马黑黑 · 发表于 2022-3-12 17:56

红影发表于 2022-3-12 17:04
掉落的距离是那句定的？

盒子的CSS，多高都行

马黑黑 · 发表于 2022-3-12 17:58

红影发表于 2022-3-12 17:00
哇，这个逐字掉落也好有趣啊

逐字是比较麻烦的，需要将子用span封装一下并赋予span一个id

马黑黑 · 发表于 2022-3-12 17:58

红影发表于 2022-3-12 17:00
是的，而且需要在制作中去真的弄到熟练

会熟练的

马黑黑 · 发表于 2022-3-12 17:59

红影发表于 2022-3-12 16:59
文字居然可以做出这么多效果，太惊艳了

有些是直接针对文字的，有些是对盒子

马黑黑 · 发表于 2022-3-12 18:16

山遠天高煙水寒

马黑黑 · 发表于 2022-3-12 18:18

85#：仿生文字代码

<style>
.fsText{ /* 仿生字体*/
margin: 10px auto 0;
width: 700px;
height: 180px;
line-height: 180px;
font-family: '微软雅黑', '黑体', sans-serif;
font-size: 6rem;
color: #f1ebe5;
text-align: center;
text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
font-weight: 900;
letter-spacing: -2px;
background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);
}
</style>

<p class ="fsText">山遠天高煙水寒</p>

马黑黑 · 发表于 2022-3-12 18:20

相見時難別亦難

马黑黑 · 发表于 2022-3-12 18:20

87#: 幻色文字

<style>
.heText{ /* 幻色字体*/
margin: 10px auto 0;
width: 600px;
height: 120px;
line-height: 120px;
color: white;
font-family: '微软雅黑', '黑体', sans-serif;
font-size: 4rem;
color: #f1ebe5;
text-align: center;
letter-spacing: 4px;
background-color: darkgray;
text-shadow: 1px 1px 0px #0000ff, 2px 2px 0px #0000ff, -1px -1px 0px #e31b4e, -2px -2px 0px #e31b4e;
}
</style>

<p class ="heText">相見時難別亦難</p>

马黑黑 · 发表于 2022-3-12 18:35

問君能有幾多愁

恰似一江春水向東流

马黑黑 · 发表于 2022-3-12 18:36

89#: 3d文本代碼

<style>

.txt3d {
margin: 10px auto 0;
width: 700px;
height: 120px;
line-height: 120px;
color: white;
font-family: '微软雅黑', '黑体', sans-serif;
font-size: 4rem;
color: #f1ebe5;
text-align: center;
letter-spacing: 4px;
background-color: #444;
text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);
}

.txt3d_1 {text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8); }

</style>

<p class ="txt3d">問君能有幾多愁</p><br><br>
<p class="txt3d txt3d_1">恰似一江春水向東流</p>

马黑黑 · 发表于 2022-3-12 18:40

凹凸（浮雕）文字，效果看下樓：

<style>
.aotu { /* 凹凸文本 */
margin: 10px auto 0;
width:700px;
height: 120px;
line-height: 120px;
text-align: center;
background: #ccc;
font-size: 5rem;
color: #ccc;
}
.ao { text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff; }
.tu { text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; }
</style>

<p class="aotu ao">冰雪林中著此身</p><br><br>
<p class="aotu tu">不同桃李混芳尘</p>