CSS 实现炫酷字体效果
一、css3 空心文字
<style>.hollow{ -webkit-text-stroke: 1px black; -webkit-text-fill-color : transparent; font-size: 30px; color:#fff;} </style><div class="hollow">空心字/缕空效果</div>
效果如下：
空心字/缕空效果
除了使用-webkit-text-stroke和-webkit-text-fill-color以外，我们还可以利用text-shadow。
<style>.hollow{ text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black; font-size: 30px; color:#fff;} </style><div class="hollow">空心字/缕空效果</div>
空心字/缕空效果
或者：
<style>.hollow{ text-shadow: 0 0 2px hsl(40, 28.57% , 28.82%),0 0 2px hsl(40, 28.57% , 28.82%), 0 0 2px hsl(40, 28.57% , 28.82%);/*多个叠加*/ font-size: 30px; color:#fff;}</style><div class="hollow">空心字/缕空效果</div>
空心字/缕空效果
二、css3立体文字
<style>.threesolid{ font-size: 30px; color:#fefefe; text-shadow:0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0, 0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, .9);} </style><div class="threesolid">立体文字效果</div>
效果如下：
立体文字效果
立体效果原理：应用了CSS3中的text-shadow属性，进行多次阴影设置，并设置不同的阴影色，从而达到一个立体的文字效果。
三、css3发光文字
<style>.light{ font-size: 30px; color: #fefefe; text-shadow: 0 0 0.5em #0ae642, 0 0 0.2em #5c5c5c;} </style><div class="light">发光文字效果</div>
效果如下：
发光文字效果
四、css3彩色文字
<style>.colortxt{ font-size: 30px; background: linear-gradient(to right, red, blue); -webkit-background-clip: text; color: transparent;}</style><span class="colortxt">彩色渐变文字效果</span>
效果如下：
彩色渐变文字效果
text的意思：就是以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。 所以，我们最后写color: transparent; 让文字为透明色，就是让后面背景色显示出来。
五、css3浮雕文字
浮雕文字效果在 Mac OS X 和 iPhone 中随处可见，由于阴影半径很小，一般是 0 或 1px, 所以也适合小号的文本。在使用上一般遵循这个原则：深色文字浅色背景，用白阴影，浅色文字深色背景，用黑阴影。
text-shadow: 0 1px 0 #eee; 凹进效果
text-shadow: 0 -1px 0 #123; 凹进效果
text-shadow: 0 -1px 1px #eee; 凸出效果
text-shadow: 0 1px 1px #123; 凸出效果
六、css3纹理文字
<style>.grunge {position:relative;color: #f06369;background: #000;text-shadow: 0 0 2px rgba(255,255,255,0.3), -1px -1px 0 #fcfcfc, 1px 1px 0 #ccc;}.grunge span{position:absolute;display:block;top:0;left:0;height:100%;width:100%;background:url("images/bg.png");}</style><div class="grunge">文字纹理效果<span></span></div>
文字纹理效果
纹理文字效果是依靠一张图片，配合其他文字效果制作出来，其原理来源于webkit-mask-image，把图片当作一个遮罩，叠合文字。
本文作者：万般自然
本文链接：https://www.cnblogs.com/qmzbe/p/15459750.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
相关知识
花体英文字如何入门？快来get这项酷炫技能！
炫酷实用的10个家庭养花创意
拍出炫酷效果，让画面不再平淡！动感花卉创意摄影实拍教程
花店CSS网页模板
Photoshop制作炫酷的UI界面中抽象花朵背景
花纹背景css整站模板资源
浪漫花雨季：酷炫鲜花榜功能抢先看
美丽花店CSS网页模板资源
扁平化粒子动画引导页美化设计
炫酷空间
网址: CSS 实现炫酷字体效果 https://m.huajiangbk.com/newsview659322.html
| 上一篇: Ascii字符画生成器 |
下一篇: 镂空字体转换器在线转换 |
