動畫條紋陰影

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 freeonly 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前端開發技術，分享網頁相關資源。
---------------------------------------------------------------