论坛 › 马黑黑教程专版 › 文字效果集中营

马黑黑 发表于 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

<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: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

<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: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

<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: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>

马黑黑 发表于 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>

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

凹凸文字的技巧，尤其是凹字：

color 和 background 要設為 #ccc

红影 发表于 2022-3-12 18:56

马黑黑 发表于 2022-3-12 17:56
盒子的CSS，多高都行

嗯嗯，知道了{:4_187:}

红影 发表于 2022-3-12 19:01

马黑黑 发表于 2022-3-12 17:58
逐字是比较麻烦的，需要将子用span封装一下并赋予span一个id

现在这个就已经有逐字效果呢{:4_187:}

红影 发表于 2022-3-12 19:03

马黑黑 发表于 2022-3-12 17:59
有些是直接针对文字的，有些是对盒子

这么多的效果，看得心花怒放{:4_173:}

红影 发表于 2022-3-12 19:06

马黑黑 发表于 2022-3-12 18:18
85#：仿生文字代码




这个效果名称好奇怪，仿生{:4_173:}

红影 发表于 2022-3-12 19:12

马黑黑 发表于 2022-3-12 18:42
凹凸文字的技巧，尤其是凹字：

color 和 background 要設為 #ccc

好美的凹凸字{:4_199:}

马黑黑 发表于 2022-3-12 20:52

红影 发表于 2022-3-12 19:12
好美的凹凸字

我看还可以

马黑黑 发表于 2022-3-12 20:53

红影 发表于 2022-3-12 19:06
这个效果名称好奇怪，仿生

嗯，这个的确是标准的仿生字，和仿生猪肉（植物性猪肉）差不多的效果。

查看完整版本: 文字效果集中营