css3实现炫酷的文字效果_空心/立体/发光/彩色/浮雕/纹理等文字特效

站长手记作者： 2024-08-28 08:35:01

这篇文章主要整理一些css3实现的一些文字特效，分享给大家，相信您看完会有不少的收货哦！包括：css3 空心文字、css3立体文字、css3发光文字、css3彩色文字、css3浮雕文字、css3纹理文字

一、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

<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发光文字

<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浮雕文字

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">文字纹理效果:fly63.com<span></span></div>

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_70028.html