NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Función CSS : circle()

30 de Diciembre del 2020 por Josep Antoni Bover. 0 visitas, 0 comentarios, 0 votos
Categorías : CSS.
La web está en segundo plano, animación en pausa.
Cargando animación...

Esta función recorta el área visible del objeto al tamaño del círculo especificado.

Solo se puede utilizar en la propiedad clip-path.


Sintaxis

Animación
circle( radio [ at X Y ] );

El rádio debe ser un valor positivo utilizando cualquier tipo de unidad de tamaño relativa válida.

Las coordenadas de inicio son opcionales, y se pueden especificar con cualquier tipo de unidad de tamaño relativo válido, tanto positivo como negativo.
Para más información sobre unidades de tamaño relativo, consulta la Referencia CSS : Unidades.

Por ejemplo podéis ver los pasos de la animación de la derecha :

1
2
3
4
5
clip-path:circle(10%); /* 10 píxeles de radio */
clip-path:circle(50% at 100% 20%); /* 50% de radio al 100% de la X y al 20% de la Y */
clip-path:circle(20% at 50% 25%); /* 20% de radio al 50% de la X y al 25% de la Y */
clip-path:circle(40px at 10% 10%); /* 40 píxeles de radio al 10% de la X y la Y */
clip-path:circle(100px at 150px 150px); /* 100 píxeles de radio a 150 píxeles de la X y la Y */

Código de ejemplo



Compatibilidad

Esta propiedad es soportada por todos los navegadores compatibles con CSS3.

Soportado a partir de la versión 24
Soportado a partir de la versión 3.5
Soportado a partir de la versión 12
NO soportado
NO soportado

Documento modificado por última vez : 30/12/2020
Ejemplo modificado por última vez : 30/12/2020

Enlaces relacionados