Hola amigo, si estas en esta página, ya sabrás de mi afición, por el uso de las propiedades CSS, transition, animation, y transform, páginas donde explicó su sintaxis con ejemplos, hoy quiero hacer un ejercicio, del empleo de estas propiedades para crear efectos, que pueden tener su uso práctico, o no en una página web, pero que en definitiva, me sirven a mi, para prácticar con el HTMLy el CSS.

Empecemos con una sección, donde os presento, maneras originales, de recibir ó despedir a las visitas de tus páginas, lo que siempre digo, yo os presento mi diseño, mi CSS, si te gusta, adaptale tu el tuyo.

Son dos encabezados <h1>, a los que les animo unas cuantas propiedades CSS, como letter-spacing, filter, y alguna otra, no voy a explicar todo el código, si te interesa, miralo, con la herramienta dev tools de tu navegador.

Aquí solo pretendo repasar algunos conceptos de las propiedades transition y animation, como es su subpropiedad animation-play-state:; que como ya sabreís, puede tener los valores, en running ó paused, en mi caso, esta el saludo en running (corriendo) y la despedida en paused (pausada ó parada), para activarla mediante la pseudo-clase :hover, osea al posar el ratón.

En la animación del cartel de despedida, interviene un atributo data-*="" personalizado, es decir <h1 data-titulo="Gracias por tu visita"></h1> que manejo como un pseudo-elemento ::after.

---

---

A continuación os presento el logotipo animado que uso yo en mis pies de página, idea que he de decir que saque de la página de Stu Nicholl, donde he aprendido mucho CSS, es una animación circular (360º), calculada mediante variables css, con efecto en el :hover y con la aparición de mis redes sociales, girándo en sentido contrario.

---

Supongo que conocereís la etiqueta html <details>, que funciona como un widget de aparición de contenido oculto por defecto, que se le muestra a pedido del usuario, cuando haga click, en la etiqueta <summary> que contiene. Puedes darle diversos usos, ya que puede incluir cualquier otro elemento html, como <a>, <img>, <div>, <p>, etc, por ejemplo, puede servir para contener el menu de navegación de la página.

Para mi gusto el único inconveniente, es al abrirlas, pasas de display: none; a display: block; sin transición, lo hace de golpe, muy brusco. Abajo os propóngo una solución a este comportamiento.

---

En esta sección, juego con un contenedor, que incluye botones sociales, que hacen una primera transición, en el :hover del contenedor y despues otra transición, en el :hover de cada botón, donde he pretendido que aparenten ser ojos, y es que te pregunto ¿crees que las redes nos observan?.

---

---