0 FPS
Función CSS : circle
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 CSS.
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
Ejemplo modificado por última vez : 30/12/2020