Code that uses CSS3 to achieve text-light effects

This article mainly introduces the use of CSS3 to achieve text light effect code, has a certain reference value, now share to everyone, have the need for friends can refer to

Previously shared a lot of CSS3 implemented font effects, today to share a pure CSS3 implementation of the text light effect. This special effect text on a light gradually swept through the text. The effect is very beautiful. Interested friends can come in and learn a bit

Today to share a pure CSS3 implementation of the text light effect. This special effect text on a light gradually swept through the text. The effect is very beautiful. Look at the effect together:

The implemented code.

　　HTML code:

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

　　CSS3 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%, Tran     Sparent 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 8p     X #6E4414, 0 9px #6E4414, 0 10px #6E4414;     top:0;   Z-index:-1;     }. Inner-shiny::after,. inner-shiny::before {-webkit-animation:sparkle 5s 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.2s;     height:7px;     Left:0.12em;     Top:0.8em;   width:7px;     }. inner-shiny::after {top:0.32em;   Rightright: -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;} }

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!