Hola! Tengo una duda, estaba tratando de aplicarle un efecto a un texto y por alguna razón no funciona en Chrome
. Acá les dejo el codigo así pueden ayudarme ^^ .. Además de la solución si ven que estoy metiendo la pata en otra cosa haganmelo saber por favor, gracias
Capaz me llamen la atención por tener un article haciendo el trabajo de un nav
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="estilos/menu.css" />
<link href='http://fonts.googleapis.com/css?family=Henny+Penny' rel='stylesheet' type='text/css'>
<title>Cotelandia</title>
</head>
<body>
<section>
<article>
<a href="#" id="sobreMi">Sobre mi</a>
<a href="#" id="creaciones">Mis creaciones</a>
<a href="#" id="contacto">Contactame</a>
</article>
<article>
<img src="imagenes/bichos.png">
</article>
</section>
</body>
</html>
Código HTML:
a{
text-decoration: none;
color: #000;
}
li{
list-style: none;
display: inline-block;
}
body{
font-size: 16px;
width: 1024px;
margin: 0 auto;
}
section{
margin: 10em 0 0 0;
text-align: center;
}
section article a{
color: rgb(60, 60, 53);
font-family: 'Henny Penny', cursive;
font-size: 2.5em;
padding: 0 1em;
}
#sobreMi, #creaciones, #contacto{
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
#sobreMi:hover, #contacto:hover{
-webkit-transform: rotate(10deg) scale(1.5);
-moz-transform: rotate(10deg) scale(1.5);
-o-transform: rotate(10deg) scale(1.5);
transform: rotate(10deg) scale(1.5);
}
#creaciones:hover{
-webkit-transform: rotate(-10deg) scale(1.5);
-moz-transform: rotate(-10deg) scale(1.5);
-o-transform: rotate(-10deg) scale(1.5);
transform: rotate(-10deg) scale(1.5);
}