CSS文字条纹阴影动画

比眉伴天荒 2022-08-24 14:17 283阅读 0赞

See the Pen [shadow text][] by haiqing wang ([@whqet][whqet]) on[CodePen][].

今天给大家推荐个动画条纹阴影效果，效果如下图所示。

![SouthEast][]

好的，让我们开工吧，首先是so easy的html。

<span class="shadow" data-text="Hello">Hello</span>

来看看关键的CSS怎么写，写东西之前弄好注释，养成好习惯。

/*
    with less hat & prefix free
    only for webkit
    */
    /*导入字体*/
    @import "http://fonts.googleapis.com/css?family=Dancing+Script:400,700";
    /*居中对齐的less mixin*/
    .center{
      position:absolute;
      top:50%;
      left:50%;
      .translate(-50%,-50%);
    }

这里的效果仅仅限于webkit的内核，仅仅是实验效果用于研究CSS3，哈哈，大家不要见笑。基于less hat和prefix free，为了简化操作代码里没有列出。

然后我们进入正题。

body{
        background-color:#27ae60;
    }
    .shadow{
      font-size: 12em;
      font-family: 'Dancing Script', cursive;
      color:#DC554F;
      .center;
      z-index:5;
      &:before{
        content:attr(data-text);
        position:absolute;
        top:6px;
        left:4px;
        .opacity(.4);
        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;
        .background-clip(text);
        /*Webkit Only，key code for the effect*/
        -webkit-text-fill-color: transparent;
        z-index:-1;
        animation: shadowGo 15s linear infinite;
      }
    }
    @keyframes shadowGo{ 
    0% {background-position: 0 0}
    0% {background-position: -100% 100%}};

大家可以到我的[codepen][shadow text]在线修改、体验，或是下载收藏本效果。

\---------------------------------------------------------------  
前端开发whqet，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[shadow text]: http://codepen.io/whqet/pen/zdEsq
[whqet]: http://codepen.io/whqet
[CodePen]: http://codepen.io
[SouthEast]: /images/20220824/c04672fc02284e329cdcb0c4f3dd7b0e.png