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 XiPhone 中随处可见,由于阴影半径很小,一般是 01px, 所以也适合小号的文本。在使用上一般遵循这个原则:深色文字浅色背景,用白阴影,浅色文字深色背景,用黑阴影。

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,把图片当作一个遮罩,叠合文字。

posted @ 2021-10-25 17:57  万般自然  阅读(12568)  评论(0编辑  收藏  举报