Función cúbica-Bezier () con el Ejemplo en CSS

CSS | cúbicas Bézier () la función : Aquí, vamos a aprender acerca de la función cúbica -bezier () con su sintaxis, ejemplos de CSS (Cascading Style Sheet).

Introducción:

¿Cuántas veces hemos llegado a través de la función de la palabra? Bueno, no sería erróneo decir mucho. El hecho de que las funciones se utilizan en el desarrollo web, mientras que el desarrollo de un sitio web o una página web es muy importante. Hay numerosas funciones por ahí que pueden ayudar a reducir la línea de sus códigos y hacer su trabajo fácil y rápido. Además, si desea ser un buen programador, entonces debe aprender tantas funciones como sea posible. Al aprender las funciones usted será capaz de escribir códigos muy eficientes y que también puede mostrar su conocimiento sobre el desarrollo web.

Esta discusión nos lleva a una pregunta: ¿por qué estamos hablando tanto de funciones? Bueno, la respuesta es muy clara ya que en este artículo vamos a aprender acerca de una función muy específica conocida como función cúbica-bezier () en CSS . La mayoría de ustedes ya saben lo que esta función es y lo que su comportamiento es y cómo es útil. Pero si usted no es consciente de esta función incluso un poco, entonces este artículo es sólo que class. Por lo tanto, sigue leyendo y todo se aclarará con usted acerca de la función cúbica -bezier () en CSS .

Descripción:

En primer lugar, vamos a empezar con la definición de la función cúbica bezier y obtener una esencia de ella.

El cúbico-Bezier () función se utiliza para denotar un cierto tipo de curva y que curva se conoce como la curva cúbico-Bezier . Para trazar esta curva, se denota principalmente por 4 puntos que podrían ser P0 , P1 , P2 & amp; P3 . Aquí, los puntos P0 y P3 representan el comienzo y el final de la curva y estos puntos siempre serán fijos.

Implementación:

Ahora, que hemos comprendido la definición de esta función, vamos a explorar más lejos: esta función se utiliza mayormente con dos propiedades y estas propiedades son propiedad-tiempo-función de animación y transición timing- propiedad de función.

Con la ayuda de la sintaxis, obtendrá una idea clara acerca de la implementación de esta función.

Sintaxis:

    element{
transition : cubic-bezier(x1,y1,x2,y2);
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.cubic-bezier {
transition: width 1.5s cubic-bezier(0.74, 0.15, 0.43, 1.5);
background: pink;
width: 180px;
height: 150px;
margin: 100px;
text-align: center;
}
.cubic-bezier:hover {
width: 70%;
}
</style>
</head>
<body>
<div class="cubic-bezier">cubic-bezier() function</div>
</body>
</html>

salida

cubic-bezier() Function with Example in CSS - 4

Pase el ratón sobre el div en el ejemplo anterior para ver el efecto de esta función.

Conclusión:

Esto fue todo sobre la función cúbicas Bézier () en CSS . Asegúrese de que utiliza esta función con prudencia ya que esta función puede llegar a ser una muy buena herramienta de estilo for. Por lo tanto, seguir adelante y divertirse con la nueva función aprendida. Asegúrese de que utiliza las propiedades mencionadas anteriormente, mientras que el uso de esta función en su sitio web o una página web.


Deja un comentario

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