利用纯css3实现的文字亮光特效的代码演示

　　今天给大家分享一款纯css3实现的文字亮光特效。这款特效文字上一道亮光逐渐扫过文字。效果非常漂亮。一起看下效果：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

<span class="shiny"><span class="inner-shiny">Shiny</span> </span>  

　　css3代码：

CSS Code复制内容到剪贴板

body   
{   
  background: #111;   
}   
  
.shiny   
{   
  color: #F5C21B;   
  background: -webkit-gradient(linear, left top, left bottombottom, from(#F5C21B), to(#D17000));   
  -webkit-background-clip: text;   
  -webkit-text-fill-color: transparent;   
  display:block;   
  width:610px;   
  margin:auto;   
  font-family: "Source Sans Pro", sans-serif;   
  font-size: 13em;   
  font-weight: 900;   
  position: relative;   
  text-transform: uppercase;   
}   
  
.shiny::before   
{   
    background-position: -180px;   
    -webkit-animation: flare 5s infinite;   
  -webkit-animation-timing-function: linear;   
  background-image: linear-gradient(65deg, transparent 20%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.3) 27%, transparent 27%, transparent 100%);   
  -webkit-background-clip: text;   
  -webkit-text-fill-color: transparent;   
  content: "Shiny";   
  color: #FFF;   
  display: block;   
  padding-right: 140px;   
  position: absolute;   
}   
  
.shiny::after   
{   
  content: "Shiny";   
  color: #FFF;   
  display: block;   
  position: absolute;   
  text-shadow: 0 1px #6E4414, 0 2px #6E4414, 0 3px #6E4414, 0 4px #6E4414, 0 5px #6E4414, 0 6px #6E4414, 0 7px #6E4414, 0 8px #6E4414, 0 9px #6E4414, 0 10px #6E4414;