[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 ; } }