Vale, por si no lo sabíais, las animaciones con CSS son alucinantes. A mi me ha dado por experimentar últimamente con ellas, y aquí tenéis el resultado:

Ver en Codepen

Explicaciones

El reloj es un simple <div> hecho circular via border-radius, con un borde gris.

Los cuatro indicadores están hechos con dos pseudo-elementos del mismo tamaño, uno de ellos rotado 90 grados. Son del alto del reloj, así que forman una cruz perfectamente centrada. El efecto de mostrar sólo el puntero se consigue en vez de dándoles un fondo sólido, usando un fondo con radial-gradient, que es transparente excepto en el fragmento del 75 al 90%:

/* un círculo transparente desde el centro al 75%, de color desde el 75% al 90%, y transparente a partir de ahí */
background-image: radial-gradient(circle, transparent, transparent 75%, $clock-indicator-color 75%, $clock-indicator-color 90%, transparent 90%, transparent);

Las agujas son tres elementos diferentes, posicionados absolutamente, y que siguen una animación llamada rotate con un tiempo diferente (60s para el segundero, 3600s para la aguja de los minutos y 86400s para la de los segundos).

steps()

El efecto de los segundos se consigue usando animation-timing-function: steps();, que es una función que toma el número de pasos que tiene que dar la animación (60 en nuestro caso, el número de segundos que tiene un minuto), y la palabra clave start o end, que es el momento en el que el valor cambiará.

4 pensamientos en “Reloj animado sólo con CSS (radial-gradient y steps)

  1. Bitacoras.com
    • Imagen de Emilio Cobos Álvarez el dijo:

      Es algo más pensado como una demo (en plan experimental), ya que funciona sólo en navegadores modernos, pero si quieres añadirlo solo tienes que copiar el html en la pestaña HTML del editor, y el css entre etiquetas <style> en esa misma pestaña.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.