动画条纹阴影

See the Pen shadow text by haiqing wang (@whqet) onCodePen.

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

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

<!--
  data-text属性用来指定阴影内容
-->
<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在线修改、体验，或是下载收藏本效果。

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