很哇塞的网页特效之动态阴影文字

        本篇分享的动态阴影文字特效通过CSS动画实现，没有JS代码控制。

        此效果原理比较简单，只是用到了平时较少使用的属性：

        -webkit-background-clip：指定背景的剪切行为，可设置的值有(border, content,padding,text)。

        -webkit-text-fill-color：设置文字的填充色。

        页面效果如下图所示：

         主要实现步骤：

         1、先使用伪元素将静态的线条背景画出来

span:after {
    content: '老杨哇塞';
    position: absolute;
    word-break: keep-all;
    top: .06em;
    left: .06em;
    z-index: -1;
    text-shadow: none;
    background-image:
        linear-gradient(45deg,
            transparent 45%,
            #EBE9E0 45%,
            #EBE9E0 55%,
            transparent 0);
    background-size: .05em .05em;
    -webkit-text-fill-color: transparent;
}

        得到效果：

         2、加上 -webkit-background-clip: text; 指定背景按文字内容进行剪切：

span:after {
    ...
    -webkit-background-clip: text;
}

        就得到下图效果：

         3、添加动画，通过设置背景位置让背景动起来，就能得到完整效果。

span:after {
    ...
    animation: shadow-move 40s linear infinite;
}

@keyframes shadow-move {
    0% {
        background-position: 0 0
    }

    0% {
        background-position: 100% -100%
    }
}

        动态阴影的位置尺寸通过设置伪元素的top和left属性进行控制。

        通过-webkit-background-clip: text 和 -webkit-text-fill-color: transparent; 结合设置，可以很容易地实现以图片作为文字前景色的效果。

        代码下载：很哇塞的网页特效之动态阴影文字源代码-网页制作文档类资源-CSDN下载