雪飘落在对面的屋顶上，屋顶像蒙了一条闪着银光的纱巾，美丽极了。雪飘落在树上，树上像缀满了银色的小花。雪飘落在操场上，操场变得像铺满棉花一样白茫茫的一片。
今天给大家分享一款纯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实现的文字亮光特效的全部代码，制作起来很简单，看完以后希望大家能学习制作，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。
