Buenas tardes a todos, en el nuevo post para hoy os voy a dejar una animación bastante chula, para que veáis lo que es posible hacer, con unos simples divs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>DevCodeLight</title>
</head>
<body>
<div id="m"><span>M</span></div>
<div id="a"><span>A</span></div>
<div id="y"><span>Y</span></div>
<div id="o"><span>O</span></div>
</body>
</html>
body {
margin: 90px;
padding: 0px;
}
#m, #a, #y, #o {
margin-left: 20px;
display: flex;
align-items: center;
position: relative;
float:left;
width: 70px;
height: 30px;
border-radius: 40%;
background-color:#33cdf3;
box-shadow: 0 5px 1px 0 black;
}
span {
margin-left: 40%;
}
#m:hover, #a:hover, #y:hover, #o:hover {
margin-top: 5px;
background-color:#279BB8;
box-shadow: none;
transition: 1s;
}
Os muestro el resultado, como lo podéis apreciar, lo que ocurre es que al hacer un hover, sobre los id de cada elemento hace una animación de un seg, como si aplastásemos un botón y el color del botrón, cambia.
Espero que os guste. 🙂
Técnica Superior en Desarrollo de Aplicaciones Web | Junior Web Developer | Front-end Developer | Dispuesta a aprender nuevas tecnologías