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

实现的代码。

html代码：

XML/HTML Code复制内容到剪贴板 <spanclass="shiny"><spanclass="inner-shiny">Shiny</span></span>

css3代码：

CSS Code复制内容到剪贴板 body { background:#111; } .shiny { color:#F5C21B; background:-webkit-gradient(linear,lefttop,leftbottombottom,from(#F5C21B),to(#D17000)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; display:block; width:610px; margin:auto; font-family:"SourceSansPro",sans-serif; font-size:13em; font-weight:900; position:relative; text-transform:uppercase; } .shiny::before { background-position:-180px; -webkit-animation:flare5sinfinite; -webkit-animation-timing-function:linear; background-image:linear-gradient(65deg,transparent20%,rgba(255,255,255,0.2)20%,rgba(255,255,255,0.3)27%,transparent27%,transparent100%); -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:01px#6E4414,02px#6E4414,03px#6E4414,04px#6E4414,05px#6E4414,06px#6E4414,07px#6E4414,08px#6E4414,09px#6E4414,010px#6E4414; top:0; z-index:-1; } .inner-shiny::after,.inner-shiny::before { -webkit-animation:sparkle5sinfinite; -webkit-animation-timing-function:linear; background:#FFF; border-radius:100%; box-shadow:005px#FFF,0010px#FFF,0015px#FFF,0020px#FFF,0025px#FFF,0030px#FFF,0035px#FFF; content:""; display:block; height:10px; opacity:0.7; position:absolute; width:10px; } .inner-shiny::before { -webkit-animation-delay:0.2s; height:7px; left:0.12em; top:0.8em; width:7px; } .inner-shiny::after { top:0.32em; rightright:-5px; } @-webkit-keyframesflare { 0%{background-position:-180px;} 30%{background-position:500px;} 100%{background-position:500px;} } @-webkit-keyframessparkle { 0%{opacity:0;} 30%{opacity:0;} 40%{opacity:0.8;} 60%{opacity:0;} 100%{opacity:0;} }

以上就是css3实现的文字亮光特效的全部代码，制作起来很简单，看完以后希望大家能学习制作，谢谢阅读，希望能帮到大家，请继续关注查字典教程网，我们会努力分享更多优秀的文章。