纯CSS3文字效果推荐

小灰灰 2022-08-27 03:21 259阅读 0赞

前端开发whqet,csdn,王海庆,whqet,前端开发专家

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

[在线研究][Link 2]单击这里，[下载收藏][Link 3]单击这里。

## 效果一-立体字效果 ##

![SouthEast][]

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

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

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

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实现立体字效果

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

## 效果二-长尾效果 ##

![SouthEast 1][]

html文件还是那样

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

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

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

## 效果三-内阴影 ##

![SouthEast 2][]  
html文件

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

css文件

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

## 效果四-斜纹字描边效果 ##

![SouthEast 3][]

html文件

<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;）实现。

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

## 效果五-文字条纹动画 ##

![SouthEast 4][]  
html文件

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

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

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

## 效果六-描边文字 ##

![SouthEast 5][]  
html文件

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

css文件

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

## 效果七-遮罩文字 ##

![SouthEast 6][]

html文件

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

css文件

.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炫光效果 ##

![SouthEast 7][]  
html文件

<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文件

.effect08 {
        color:#fff;
        transform-origin:center bottom;
        transform-style:preserve-3d;
        transition:all 1s;
        cursor: pointer;
    }
    .effect08:hover {
        transform:rotate3d(1, 0, 0, 40deg);
    }
    .effect08 h1 {
        position: absolute;
        left:0;
        right:0;
        margin:auto;
        text-shadow:0 0 10px rgba(0, 0, 100, .5);
    }
    /*
    sass 循环给每一个h1设置不同的translateZ
    */
    @for $n from 1 to 8 {
        .effect08 h1:nth-child(#{$n}) {
            transform:translateZ(4px*$n);
        }
    }

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

[在线研究][Link 2]单击这里， [下载收藏][Link 3]单击这里。

\----------------------------------------------------------

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

[CSS]: http://blog.csdn.net/whqet/article/details/18946017
[Link 1]: http://blog.csdn.net/whqet/article/details/20987649
[Link 2]: http://codepen.io/whqet/pen/lHKew
[Link 3]: http://codepen.io/whqet/share/zip/lHKew/
[SouthEast]: /images/20220824/e21d409448d147f1bcbaf08913ee0ff3.png
[SouthEast 1]: /images/20220824/59586f982f2c407290154f9d97b6f45c.png
[SouthEast 2]: /images/20220824/601fa82b036d46af99a9d815faf72322.png
[SouthEast 3]: /images/20220824/a1e8c2b543e8436ea49bfa6c9b326748.png
[SouthEast 4]: /images/20220824/08426d704d1c43f39ad0a23b3149677f.png
[SouthEast 5]: /images/20220824/2ae6dbd60aff4681b7b46913e4a12ed1.png
[SouthEast 6]: /images/20220824/a559ab945a6c41c4b31b92fd58af1b66.png
[SouthEast 7]: /images/20220824/f665fb920cad484b88aa805b5063ed87.png
[CSS 1]: http://blog.csdn.net/whqet/article/details/25051237
[whqet]: http://blog.csdn.net/whqet