纯CSS3如何实现文字效果？8种文字效果分享

今天我们来研究几款文字效果，主要利用text-shadow、webkit内核的几个独有特性实现效果。

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

效果一-立体字效果

我们的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);
}
    

效果二-长尾效果

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

效果三-内阴影

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

效果四-斜纹字描边效果

html文件

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

css文件，使用linear-gradient对p设置条纹背景、只在文本上显示背景（-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;
}
    

效果五-文字条纹动画

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

效果六-描边文字

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

效果七-遮罩文字

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

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

更多编程相关知识，请访问：编程视频！！

以上就是纯CSS3如何实现文字效果？8种文字效果分享的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！