Efecto de enfoque de texto con transiciones de CSS y CSS3
| Autor: | tgideas |
|---|---|
| Views Total: | 2,604 |
| Sitio oficial: | Ir a la web |
| Actualizado: | November 11, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
Un efecto de enfoque CSS/CSS3 puro que difumina el texto innecesario cuando se desplaza sobre un vínculo, con un efecto de transición CSS3 suave.
Funcionamiento
Cree una lista de vínculos.
<ul> <li><a href="#">CSSScript</a></li> <li><a href="#">CSSScript</a></li> <li><a href="#">CSSScript</a></li> <li><a href="#">CSSScript</a></li> </ul>
Agregue el efecto de desenfoque en todos los vínculos mediante la propiedad Text-Shadow.
a {
text-shadow: #fff 0 0 25px;
-webkit-transition: all .8s ease-out;
-moz-transition: all .8s ease-out;
transition: all .8s ease-out;
} Cree el efecto de enfoque de texto de vínculo al desplazar el mouse.
a:hover {
text-shadow: #fff 0 0 0;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
transition: all .1s ease-out;
}
a:active {
text-shadow: #fff 0 0 50px;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
transition: all .2s ease-out;
}
