[HTML5&CSS3]纯css3实现的文字亮光特效

1. [图片] 201411232307357663.jpg   

2. [代码][HTML]代码     

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

3. [代码][CSS]代码   

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92

body {    background :  #111 ; }   .shiny {    color :  #F5C21B ;    background : -webkit-gradient(linear,  left  top ,  left  bottom , 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  5 s infinite;    -webkit-animation-timing-function: linear;    background-image : linear-gradient( 65 deg,  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 ;    top :  0 ;    z-index :  -1 ; }   .inner-shiny::after, .inner-shiny::before {          -webkit-animation: sparkle  5 s infinite;    -webkit-animation-timing-function: linear;      background :  #FFF ;    border-radius:  100% ;    box-shadow:  0  0  5px  #FFF ,  0  0  10px  #FFF ,  0  0  15px  #FFF ,  0  0  20px  #FFF ,  0  0  25px  #FFF ,  0  0  30px  #FFF ,  0  0  35px  #FFF ;    content :  "" ;    display :  block ;    height :  10px ;    opacity:  0.7 ;    position :  absolute ;    width :  10px ; }   .inner-shiny::before {      -webkit-animation-delay:  0.2 s;    height :  7px ;    left :  0.12em ;    top :  0.8em ;    width :  7px ; }   .inner-shiny::after {    top :  0.32em ;    right :  -5px ; }   @-webkit-keyframes flare {    0%    {  background-position :  -180px ; }    30%   {  background-position :  500px ; }    100%  {  background-position :  500px ; } }   @-webkit-keyframes sparkle {    0%    { opacity:  0 ; }    30%   { opacity:  0 ; }    40%   { opacity:  0.8 ; }    60%   { opacity:  0 ; }    100%  { opacity:  0 ; } }