css3发光效果-CSS3实现炫丽文字效果_镂空/立体/发光/彩色/圆雕/纹理等文字效果

bendan520 css3

2023-08-23 0 4,457 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

本文主要整理了一些CSS3实现的特殊文字效果，分享给大家。相信看完之后您一定会收到很多好货！

1.CSS3空心文本

<style>
.hollow{
  -webkit-text-stroke: 1px black;  
  -webkit-text-fill-color : transparent;
  font-size: 30px; 
  color:#fff;
} 
</style>
<div class="hollow">空心字/缕空效果:fly63.com</div>  
</body>

疗效如下：

空心字/股空的疗效：fly63.com

不仅可以使用-webkit-text-lines和-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">空心字/缕空效果:fly63.com</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">空心字/缕空效果:fly63.com</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">立体文字效果:fly63.com</div>

疗效如下：

立体文字的疗效：fly63.com

立体效果原理：应用CSS3中的text-shadow属性css3发光效果，进行多种阴影设置，并设置不同的阴影颜色css3发光效果，实现立体文字效果。

三、css3发光文字

<style>
.light{      
    font-size: 30px;
    color: #fefefe;
    text-shadow: 0 0 0.5em #0ae642, 0 0 0.2em #5c5c5c;
} 
</style>
<div class="light">发光文字效果:fly63.com</div>

疗效如下：

发光文字功效：fly63.com

四、css3彩色文本

<style>
.colortxt{      
    font-size: 30px;
    background: linear-gradient(to right, red, blue);
    -webkit-background-clip: text; 
    color: transparent;   
} 
</style>
<span class="colortxt">彩色渐变文字效果:fly63.com</span>

疗效如下：

颜色渐变文字效果：fly63.com

文本的含义：就是以块内的文本作为剪切区域向外剪切，文本的背景为块的背景，文本以外的区域将被剪切。因此，我们最后写颜色：透明；使文字透明，即显示前面的背景色。

五、css3圆形雕刻文字

雕刻文字效果在MacOSX和iPhone中随处可见，因为阴影直径很小，通常为0或1px，因此也适合较大的文字。使用时通常遵循这样的原则：红色文本蓝色背景，使用白色阴影，白色文本蓝色背景，使用黑色阴影。

文本阴影：01px0#eee；疗效隐匿

文本阴影：0-1px0#123；凹疗效

文本阴影：0-1px1px#eee；疗效突出

文本阴影：01px1px#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">文字纹理效果:fly63.com<span></span></div>