纯CSS3文字效果推荐

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

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

效果一-立体字效果

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

[html] view plain copy print ?

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

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

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

[css] view plain copy print ?

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. }

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

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

[css] view plain copy print ?

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. }

.effect01{
    background-color: #333;
    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, 0.6);
}

效果二-长尾效果

html文件还是那样

[html] view plain copy print ?

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

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

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

[css] view plain copy print ?

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. }

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

效果三-内阴影

html文件

[html] view plain copy print ?

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

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

css文件

[css] view plain copy print ?

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

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

效果四-斜纹字描边效果

html文件

[html] view plain copy print ?

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

<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 print ?

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. }

.effect04{
  background-color: #333;
  background-image:
      linear-gradient(
        45deg,
        transparent 45%,
        hsla(48,20%,90%,1) 45%,
        hsla(48,20%,90%,1) 55%,
        transparent 0
        );
    background-size: .05em .05em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #111;
}

效果五-文字条纹动画

html文件

[html] view plain copy print ?

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

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

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

[css] view plain copy print ?

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%}};

.effect05{
    color:#DC554F;
    background-color:#27ae60;
    z-index: 3;
}
.effect05:before{
    content:attr(data-text);  
    width:100%;
    line-height:200px;
    opacity: .5;
    position: absolute;
    top:2px;
    left:5px;
    background-image:  
      linear-gradient(  
        45deg,  
        transparent 45%,  
        hsla(48,20%,90%,1) 45%,  
        hsla(48,20%,90%,1) 55%,  
        transparent 0  
        ); 
    z-index:-1;
    background-size: .05em .05em;  
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    animation: shadowGo 20s linear infinite; 
}
@keyframes shadowGo{   
    0% {background-position: 0 0}  
    0% {background-position: -100% 100%}}; 

效果六-描边文字

html文件

[html] view plain copy print ?

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

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

css文件

[css] view plain copy print ?

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. }

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

效果七-遮罩文字

html文件

[html] view plain copy print ?

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

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

css文件

[css] view plain copy print ?

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. }

.effect07 {
    background: url(http://www.pencilscoop.com/demos/CSS_Text_Effects/images/galaxy.jpg) #333;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: cover;
    animation: 10s infinite linear animate;
}
.effect07:before {
    content:"";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background-color: #999;
    z-index: -1;
}
@keyframes animate {
    0% {
        background-position:0;
    }
    100% {
        background-position:-1000px 0;
    }
}

效果八-3D炫光效果

html文件

[html] view plain copy print ?

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>

<div class="text effect08">
  <h1>前端开发whqet</h1>
  <h1>前端开发whqet</h1>
  <h1>前端开发whqet</h1>
  <h1>前端开发whqet</h1>
  <h1>前端开发whqet</h1>
  <h1>前端开发whqet</h1>
  <h1>前端开发whqet</h1>
  <h1>前端开发whqet</h1>
</div>

css文件

[css] view plain copy print ?

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. }