纯CSS3文字效果推荐

转自：http://blog.csdn.net/whqet/article/details/24793049

之前曾经研究过几个纯css实现的文字效果，《CSS文字条纹阴影动画》和《响应式奶油立体字效果》等，今天我们来研究几款文字效果，主要利用text-shadow、webkit内核的几个独有特性实现效果。

在线研究单击这里，下载收藏单击这里。

效果一-立体字效果

我们的html文件貌似这样，为了更好的展示效果，我们加上了可编辑属性。

[html]  view plain copy

1. <div contenteditable="true" class="text effect01">前端开发whqet</div>  

css文件里，我们先看看全局的设置

[css]  view plain copy

1. body{  
2.   background-color: #666;  
3. }  
4. @import url(http://fonts.googleapis.com/css?family=Dosis:500,800);  
5. .text {  
6.     font-family:"微软雅黑", "Dosis", sans-serif;  
7.     font-size: 80px;  
8.     text-align: center;  
9.     font-weight: bold;  
10.     line-height:200px;  
11.     text-transform:uppercase;  
12.     position: relative;  
13. }  

然后才是效果一的专属CSS，非常简单，就是用text-shadow实现立体字效果

[css]  view plain copy

1. .effect01{  
2.     background-color: #333;  
3.     color:#fefefe;  
4.     text-shadow:  
5.     0px 1px 0px #c0c0c0,  
6.     0px 2px 0px #b0b0b0,  
7.     0px 3px 0px #a0a0a0,  
8.     0px 4px 0px #909090,  
9.     0px 5px 10px rgba(0, 0, 0, 0.6);  
10. }  

效果二-长尾效果

html文件还是那样

[html]  view plain copy

1. <div contenteditable="true" class="text effect02">前端开发whqet</div>  

text-shadow里面偏移多一点，颜色逐渐简单，长尾效果就来了。

[css]  view plain copy

1. .effect02{  
2.   color:#333;  
3.   background-color: #ddd;  
4.   text-shadow:  
5.     1px -1px 0 #767676,   
6.     -1px 2px 1px #737272,   
7.     -2px 4px 1px #767474,   
8.     -3px 6px 1px #787777,   
9.     -4px 8px 1px #7b7a7a,   
10.     -5px 10px 1px #7f7d7d,   
11.     -6px 12px 1px #828181,   
12.     -7px 14px 1px #868585,   
13.     -8px 16px 1px #8b8a89,   
14.     -9px 18px 1px #8f8e8d,   
15.     -10px 20px 1px #949392,   
16.     -11px 22px 1px #999897,   
17.     -12px 24px 1px #9e9c9c,   
18.     -13px 26px 1px #a3a1a1,   
19.     -14px 28px 1px #a8a6a6,   
20.     -15px 30px 1px #adabab,   
21.     -16px 32px 1px #b2b1b0,   
22.     -17px 34px 1px #b7b6b5,  
23.     -18px 36px 1px #bcbbba,   
24.     -19px 38px 1px #c1bfbf,   
25.     -20px 40px 1px #c6c4c4,   
26.     -21px 42px 1px #cbc9c8,   
27.     -22px 44px 1px #cfcdcd;  
28. }  

效果三-内阴影

html文件

[html]  view plain copy

1. <div contenteditable="true" class="text effect03">前端开发whqet</div>  

css文件

[css]  view plain copy

1. .effect03{  
2.   color: #202020;  
3.   background-color: #2d2d2d;  
4.   text-shadow:   
5.     -1px -1px 1px #111111,  
6.     2px 2px 1px #363636;  
7. }  

效果四-斜纹字描边效果

html文件

[html]  view plain copy

1. <div contenteditable="true" class="text effect04">前端开发whqet</div>  

css文件，使用linear-gradient对div设置条纹背景、只在文本上显示背景（-webkit-background-clip: text;）、文字颜色透明（-webkit-text-fill-color: transparent;）和文字描边（-webkit-text-stroke: 2px #111;）实现。

[css]  view plain copy

1. .effect04{  
2.   background-color: #333;  
3.   background-image:  
4.       linear-gradient(  
5.         45deg,  
6.         transparent 45%,  
7.         hsla(48,20%,90%,1) 45%,  
8.         hsla(48,20%,90%,1) 55%,  
9.         transparent 0  
10.         );  
11.     background-size: .05em .05em;  
12.   -webkit-background-clip: text;  
13.   -webkit-text-fill-color: transparent;  
14.   -webkit-text-stroke: 2px #111;  
15. }  

效果五-文字条纹动画

html文件

[html]  view plain copy

1. <div data-text="前端开发whqet" class="text effect05">前端开发whqet</div>  

css文件，利用:before伪对象来显示条纹，并对之添加动画。

[css]  view plain copy

1. .effect05{  
2.     color:#DC554F;  
3.     background-color:#27ae60;  
4.     z-index: 3;  
5. }  
6. .effect05:before{  
7.     content:attr(data-text);    
8.     width:100%;  
9.     line-height:200px;  
10.     opacity: .5;  
11.     position: absolute;  
12.     top:2px;  
13.     left:5px;  
14.     background-image:    
15.       linear-gradient(    
16.         45deg,    
17.         transparent 45%,    
18.         hsla(48,20%,90%,1) 45%,    
19.         hsla(48,20%,90%,1) 55%,    
20.         transparent 0    
21.         );   
22.     z-index:-1;  
23.     background-size: .05em .05em;    
24.     -webkit-background-clip: text;  
25.     -webkit-text-fill-color: transparent;   
26.     animation: shadowGo 20s linear infinite;   
27. }  
28. @keyframes shadowGo{     
29.     0% {background-position: 0 0}    
30.     0% {background-position: -100% 100%}};   

效果六-描边文字

html文件

[html]  view plain copy

1. <div contenteditable="true" class="text effect06">前端开发whqet</div>  

css文件

[css]  view plain copy

1. .effect06 {  
2.     -webkit-text-fill-color: transparent;  
3.     -webkit-text-stroke: 2px #d6d6d6;  
4.     background: url(http://www.pencilscoop.com/demos/CSS_Text_Effects/images/galaxy.jpg);  
5.     background-size: cover;  
6. }  

效果七-遮罩文字

html文件

[html]  view plain copy

1. <div contenteditable="true" class="text effect07">前端开发whqet</div>  

css文件

[css]  view plain copy

1. .effect07 {  
2.     background: url(http://www.pencilscoop.com/demos/CSS_Text_Effects/images/galaxy.jpg) #333;  
3.     -webkit-background-clip: text;  
4.     -webkit-text-fill-color: transparent;  
5.     background-size: cover;  
6.     animation: 10s infinite linear animate;  
7. }  
8. .effect07:before {  
9.     content:"";  
10.     width:100%;  
11.     height:100%;  
12.     position: absolute;  
13.     left:0;  
14.     top:0;  
15.     background-color: #999;  
16.     z-index: -1;  
17. }  
18. @keyframes animate {  
19.     0% {  
20.         background-position:0;  
21.     }  
22.     100% {  
23.         background-position:-1000px 0;  
24.     }  
25. }  

效果八-3D炫光效果

html文件

[html]  view plain copy

1. <div class="text effect08">  
2.   <h1>前端开发whqet</h1>  
3.   <h1>前端开发whqet</h1>  
4.   <h1>前端开发whqet</h1>  
5.   <h1>前端开发whqet</h1>  
6.   <h1>前端开发whqet</h1>  
7.   <h1>前端开发whqet</h1>  
8.   <h1>前端开发whqet</h1>  
9.   <h1>前端开发whqet</h1>  
10. </div>  

css文件

[css]  view plain copy

1. .effect08 {  
2.     color:#fff;  
3.     transform-origin:center bottom;  
4.     transform-style:preserve-3d;  
5.     transition:all 1s;  
6.     cursor: pointer;  
7. }  
8. .effect08:hover {  
9.     transform:rotate3d(1, 0, 0, 40deg);  
10. }  
11. .effect08 h1 {  
12.     position: absolute;  
13.     left:0;  
14.     right:0;  
15.     margin:auto;  
16.     text-shadow:0 0 10px rgba(0, 0, 100, .5);  
17. }  
18. /* 
19. sass 循环给每一个h1设置不同的translateZ 
20. */  
21. @for $n from 1 to 8 {  
22.     .effect08 h1:nth-child(#{$n}) {  
23.         transform:translateZ(4px*$n);  
24.     }  
25. }  

That's it，篇幅限制，仅仅列出了效果思路，效果的灵活性、复用性，请移步《 CSS立体文字效果最佳实践》查看详情。

在线研究单击这里， 下载收藏单击这里。

----------------------------------------------------------

前端开发whqet，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------