Animar texto con CSS

Animar el background de un texto con CSS, para tal efecto usaremos un gif animado y la propiedad css -webkit-background-clip: text

Las última versión de CSS es decir CSS3 nos ha traido nuevas propiedades para poder aplicarlas en nuestros desarrollos web, una de las cuales de poder agregar un relleno al texto como una imagen, pues en este caso usaremos un gif animado.

  • Creamos un documento html llamado index.html
  • Buscamos y descargamos un gif animado adecuado para el texto
  • Agregamos un h1 al body de nuestro html
  • y creamos estilos para el h1.

Veamos el código completo 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Texto con background animado</title>	
	<style>
	body{
		background: red;
	}
	h1{ 
		font-size: 150px;
		font-family: fantasy;
   		background: url(image.gif);
   		-webkit-background-clip: text;
   		-webkit-text-fill-color: transparent;
   		text-align: center;
   		-webkit-text-stroke-width: 5px;
   		-webkit-text-stroke-color: white;   		
	}
	</style>
</head>
<body>
	<h1>PERÚ 2019</h1>	
</body>
</html>

 

VIDEO Como animar texto con css

Visitas: 108 | Publicado:2018-12-26 20:39:12

Publicaciones que te pueden interesar

Facebook Twitter Youtube Pinterest Wordpress Google Plus

:: Calle Paucarpata 130 Of. 212 2do Piso CC. AQPcompucentro ::
:: © Todos los derechos reservados APPTIVA WEB | Arequipa Perú 2010-2018 ::