Para el efecto de brillo en un texto solo hace falta un hover y una transición para desplazar una capa sobre otra, así de simple.
Empezaré por la parte de html:
<a href="#" class="brillo"><img src="/logocss.png" alt="css" /><span></span></a>
En este caso la imagen va a ser un enlace, pero podría ser otro elemento cualquiera. El span situado al final, es la capa que pasa por delante simulando el brillo. Incluyo todos los archivos al final del articulo:
En cuanto al CSS tambien es muy simple:
Primero establecemos las dimensiones del contenedor, en este caso el enlace, y evitamos que la imagen que hace de brillo salga de este con "overflow:hidden". Importante usar las posiciones relativas tanto en el elemento contenedor como en la capa de brillo, para que esta última se sitúe por encima en el mismo orden de aparición que en el documento html.
.brillo{
position:relative;
display: block;
height: 133px;
width: 132px;
text-decoration:none;
overflow:hidden;
}
Después al span (imagen de arriba) le pongo las mismas dimensiones y lo saco del campo de visión, dejándolo 300px a la izquierda de la imagen en posición inicial.
.brillo span{
position:relative;
display: block;
background:url(brillo.png) no-repeat;
background-position: -300px 0px;
margin-top:-137px;
height: 133px;
width: 132px;
}
Para terminar inicio la transición con un hover, finalizando la animación 300px a la derecha de la imagen en un lapso de tiempo de 1,5 segundos.
.brillo:hover span{
background-position: 300px 0px;
-webkit-transition-property: all;
-webkit-transition-duration: 1.5s;
transition-property: all;
transition-duration: 1.5s;
}
Si en vez de una imagen usamos texto en el enlace, el resultado seria el siguiente:
Tan solo he usado una imagen de brillo mas pequeña y he adaptado las medidas de la animación en consecuencia.
De esta forma el html quedaría así:
<a href="#" class="brillo">CSS3<span></span></a>
y el CSS así:
.brillo{
position:relative;
display: block;
font-size:70px;
height: 70px;
width: 200px;
text-decoration:none;
color:#333;
overflow:hidden;
}
.brillo span{
position:relative;
display: block;
background:url(brillo.png) no-repeat;
background-position: -100px 0px;
margin-top:-75px;
height: 70px;
width: 200px;
}
.brillo:hover span{
background-position: 300px 0px;
-webkit-transition-property: all;
-webkit-transition-duration: 1s;
transition-property: all;
transition-duration: 1s;
}
Y así de simple es realizar un efecto brillo con CSS, existen mas alternativas por supuesto, tal vez se podría hacer sin las imágenes, con una capa brillo construida íntegramente a partir de CSS por ejemplo.