Cursor animado CSS
Ejemplo 1
Para crear el cursor animado, estamos utilizando HTML, CSS y JavaScript en este código. Primero, debemos hacer el archivo HTML en el código de Visual Studio. Puedes usar cualquier editor de tu elección. Aquí, estamos utilizando el código Visual Studio. Seleccionamos el idioma para el código HTML como "HTML". Y luego escriba el código aquí. También proporcionamos el código para el cursor animado en este ejemplo. Puede usar este código para hacer el cursor animado. Ahora, comience con el código HTML.
Creamos la clase "Div" "cursor" y una clase de "sección" llamada "principal" dentro del "div". Luego, creamos el siguiente encabezado, nuestro encabezado 1, y cerramos la etiqueta "Sección" aquí. A continuación, estamos utilizando "JavaScript" en este archivo "HTML". Usamos la etiqueta "Script", y en su tipo, damos el nombre del "JavaScript", que es "Texto/JavaScript". Con esto, definimos el cursor "const" y usamos la "consulta. selector". La consulta. Selector "se utiliza para devolver el elemento," documento ", que coincidirá con el selector, y este selector es" cursor ".
Ahora, estamos usando "var" y lo llamamos "tiempo de espera". Luego viene el método "AddEventLisner". Adjuntará un controlador de eventos al elemento que especificamos aquí. El evento aquí es el "mouseMove", que se adhiere al elemento "documento". Estamos utilizando "dejar" declarar una variable "x" e inicializarla con "e.Pagex ". La propiedad "Pagex" devolverá el eje horizontal del cursor cuando se active el evento del cursor. Y la variable "y" con el mismo tipo de datos de "dejar", inicialice esta "y" con "E.Pagey ". La propiedad "Pagey" devolverá el eje vertical del cursor cuando se active el evento del cursor. Además, establezca el "cursor. Estilo "a" Top "," Left "y" Display ".
Después de esto, usamos la "función mouseSestopped", por lo que cuando esta función llame, mostrará "ninguno". Luego, estamos utilizando la función "Tiempo de espera claro" y pasamos "Tiempo de espera" como parámetro y establece este "Tiempo de tiempo" a continuación. Nuevamente usamos "addeveneTlisner" y cerramos la etiqueta "script" aquí. Se trata de "htmlhtml" y "javaScript". Ahora, vamos a usar CSS para el estilo.
Código CSS
En el CSS, importamos la "URL" y usamos el selector "*", que se utiliza para seleccionar todos los elementos. Establecimos el "margen" y el "relleno" dentro del selector "*" en "0". El "tamaño de caja" que establecemos aquí es "Border-Box", que se utiliza para especificar el comportamiento del "ancho" y la "altura" y la selección de la "familia de fuentes". Luego, usamos "cuerpo" y establecemos la altura en "100VH". El "fondo" es "negro" y establece el "cursor" en "ninguno".
Ahora, estamos diseñando el "principal", y su altura se establece como "100vh". Estamos utilizando la pantalla "Flex" y "Justify-Content" para el "Centro", también "Alineado" al "Centro". Aplique el color "blanco" al "H1" y use el "0.Valor alfa de 8 "para esto. Establecimos el "tamaño de fuente" de este rumbo a "65px". Ahora, establezca el "índice z" del "cursor" como "999". La "posición" para esto es "fija" y establece como "fondo". El "ancho" y la "altura" son "20px", y el "radio fronterizo" es "50%". El "Pointer-Event" es "Ninguno". La "Shadow de caja" agregará una o más sombras alrededor del marco de los elementos. Establecimos el "h-ofsset", que es el desplazamiento horizontal, en "0", y el "V-ofset", que es el desplazamiento vertical, a "0", y el "desenfoque" es "20px" y " azul". El mismo "H-Offset" y "V-Offset" están en las siguientes dos líneas, pero el valor de "desenfoque" cambia en cada uno como "60px" y "100px".
Usamos animación para la propiedad "5s" y la propiedad "Transformar: Traducir" aquí. Además, configure su "pantalla" en "Ninguno". Ahora, los fotogramas clave se usan para la animación. Además, estamos utilizando el selector "antes" aquí y configurando el "contenido" antes de esto. Establezca la "posición" en "absoluto" y "fondo" en "azul". El "ancho" y la "altura" es "50px". La "opacidad" que usamos es "0.2 ", y la propiedad" Transform-Translate "está aquí. El "Radio fronterizo" es "50%".
Producción
Video Playerhttps: // Linuxhint.com/wp-content/uploads/2022/06/cursor_animation_on_mousemove_mouseout_mousestopped_profile_1.MP400: 0000: 0000: 09 Utilice las teclas de flecha hacia arriba/hacia abajo para aumentar o disminuir el volumen.Ejemplo # 2
En este ejemplo, creamos el archivo JavaScript externo y vinculamos este archivo a nuestro archivo HTML y vinculamos el archivo CSS.
Creamos una clase "principal" llamada "bg_canvas" dentro de este. Tenemos un "encabezado" de clase "div". Creamos el encabezado en este "div". El otro nombre de div es "cursor" y, después del segundo "div", cerramos el "principal" y vinculamos el archivo JavaScript aquí. Colocamos el nombre del archivo JavaScript, "AnimatedMouse.JS ", y cerró la etiqueta" Script ".
Código CSS
Establecemos el "raíz", que selecciona los elementos raíz en el HTML y establece el color "negro", el color "azul" y el color "blanco" en forma "RGB" y "verde" en "RGB". Luego, usamos el selector "*", que selecciona todos los elementos, y hacemos algo de estilo aquí, que se aplicará a todos los "elementos". Acabamos de establecer "margen" y "relleno" aquí en "0".
Entonces, diseñamos el "encabezado". El "ancho" y la "altura" del encabezado son "100%" y "300px", respectivamente. El "tamaño de caja" es "border", y la "pantalla" es "flexible". "Justificamos el contenido" y "Alineado" en el "Centro". También diseñamos el "cursor" y establecemos el "ancho" y la "altura" como "20px" cada uno. También establecemos el "borde" en el ancho "10px" del tipo "sólido" y establecemos el color del borde. La "duración de la transición" que usamos es "200 ms". Usamos "animación" y animamos el cursor para "550s". Luego, usamos el selector "After" con el "cursor" y establecemos el contenido. También establecemos "ancho" y "altura" como "40px", "borde" como "15px" en el tipo "sólido", "fronterizo-radio" como "50%" y "absoluto" en "posición". La "superior" y la "izquierda" se establece como "-25px" para cada uno y luego usa la propiedad "animación". Ahora viene el "título de encabezado" y el estilo. Establecimos su "Fuente-Familia", y el "peso" de esta fuente es "300". Lo alineamos en el "centro", y el "tamaño de fuente" es "60px". El "color" es "negro" para la fuente. Ahora, peinaremos "bg_canvas", que es el nombre de la clase "principal". Su "ancho" es "100%" y "altura" es "100VH" y establece su "color de fondo" y "dimensionamiento de la caja".
Después de esto, usamos "Cursor-Expand" y la propiedad "Animación". También establecemos el "borde" para esto. Luego, usamos el selector "After" con este "Expuesto de cursor" y establecemos su "borde". Luego, estamos utilizando los "fotogramas clave" aquí, que usamos para la animación, y usamos la escala de transformación de transformación "from" (1) "a" (1.5), y lo mismo en las siguientes líneas:
Código JavaScript
En la siguiente imagen, este es el código JavaScript. Y este código es el mismo que el código JavaScript anterior, que hemos explicado en nuestro primer ejemplo. Guardamos el archivo JavaScript con el ".Extensión del archivo JS "y debe vincular este archivo con nuestro archivo HTML.
Producción
Video Playerhttps: // Linuxhint.com/wp-content/uploads/2022/06/animated-cursor-in-css-profile-1-microsoft_-edge-2022-06-03-11-07-03.MP400: 0000: 0000: 09 Utilice las teclas de flecha hacia arriba/hacia abajo para aumentar o disminuir el volumen.Conclusión
En esta guía, hemos discutido el cursor animado en CSS. Hemos escrito este artículo para explicar cómo hacer de su cursor un cursor animado usando CSS. Hemos utilizado diferentes propiedades en CSS, y utilizamos el código HTML y JavaScript y hemos vinculado estos archivos para hacer el cursor animado. Hemos explorado dos ejemplos diferentes para hacer el cursor animado de diferentes estilos. Espero que después de leer este artículo haga el cursor animado en sus sitios web para que su sitio web sea más atractivo.