devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

纯CSS3文字效果推荐_css3 文字效果

作者：盐析白兔 | 2024-02-16 21:11:54

赞

踩

css3 文字效果

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

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

效果一-立体字效果


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

[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <div contenteditable="true" class="text effect01">前端开发whqet</div> 
<div contenteditable="true" class="text effect01">前端开发whqet</div>
css文件里，我们先看看全局的设置

[css] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  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. } 
  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 print ? 在CODE上查看代码片 派生到我的代码片
  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. } 
  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 print ? 在CODE上查看代码片 派生到我的代码片
  1. <div contenteditable="true" class="text effect02">前端开发whqet</div> 
<div contenteditable="true" class="text effect02">前端开发whqet</div>
text-shadow里面偏移多一点，颜色逐渐简单，长尾效果就来了。
[css] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  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. } 
  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 print ? 在CODE上查看代码片 派生到我的代码片
  1. <div contenteditable="true" class="text effect03">前端开发whqet</div> 
<div contenteditable="true" class="text effect03">前端开发whqet</div>
css文件
[css] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. .effect03{
  2. color: #202020;
  3. background-color: #2d2d2d;
  4. text-shadow:
  5. -1px -1px 1px #111111,
  6. 2px 2px 1px #363636;
  7. } 
  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 print ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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. } 
  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 print ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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%}}; 
  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 print ? 在CODE上查看代码片 派生到我的代码片
  1. <div contenteditable="true" class="text effect06">前端开发whqet</div> 
<div contenteditable="true" class="text effect06">前端开发whqet</div>
css文件
[css] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  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. } 
  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 print ? 在CODE上查看代码片 派生到我的代码片
  1. <div contenteditable="true" class="text effect07">前端开发whqet</div> 
<div contenteditable="true" class="text effect07">前端开发whqet</div>
css文件
[css] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  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. } 
  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 print ? 在CODE上查看代码片 派生到我的代码片
  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> 
  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 print ? 在CODE上查看代码片 派生到我的代码片
  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. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/96693
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号