0

Me piden hacer el siguiente ejercicio en el sitio de acamica:

Aplicar sólo lo necesario para que shake-rotate reaccione ante :hover en el elemento .

El código inicial es:

<!doctype html>
<html>
	<head>
		<title>Shake</title>
		<meta charset="utf-8">
				
		<style>
		div {
		  width: 100px;
		  height: 100px;
		  background-color: red;
		  margin: 20vh 50px;
		}
		</style>
		<link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake.min.css">
		<link rel="stylesheet" href="estilo.css">
	</head>
	<body>
		<h1>Shake</h1>
		
		<div></div>
		
	</body>
</html>

Esto es lo que he intentado:

<!doctype html>
<html>

<head>
  <title>Shake</title>
  <meta charset="utf-8">

  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 20vh 50px;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake.min.css">
  <link rel="stylesheet" href="estilo.css">
</head>

<body>
  <h1>Shake</h1>

  <div class="shake-rotate shake-constant--hover"></div>

</body>

</html>

Pero creo que puse cosas de más porque me da el error:

Logic error

El elemento div debería tener definida una clase con las propiedades requeridas.

¿Existe alguna forma más breve usando al librería que me permita pasar el ejercicio?¿Qué modificaciones debo de aplicar?

3
  • 1
    Deja únicamente la clase shake-rotate en el DIV; la animación se activa por sí sola al hacer hover el 22 ene. 2019 a las 13:05
  • Efectivamente @JheymanMejia por favor agrega tu respuesta el 22 ene. 2019 a las 20:00
  • Listo @RuslanLopez el 22 ene. 2019 a las 21:18

1 respuesta 1

1

Después de quitar la compresión de la hoja de estilos .min.css con una herramienta online pude visualizar de mejor manera el código, existe el elemento .shake-rotate:hover con los atributos que trae de igual manera la clase .shake-constantpor ello sobra su uso en el ejercicio.

<!doctype html>
<html>

<head>
  <title>Shake</title>
  <meta charset="utf-8">

  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 20vh 50px;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake.min.css">
  <link rel="stylesheet" href="estilo.css">
</head>

<body>
  <h1>Shake</h1>

  <div class="shake-rotate"></div>

</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.