Curseur animé CSS

L'animation est quelque chose dans lequel l'objet apparaît comme un objet en mouvement. Dans CSS, nous pouvons dire que le curseur est un curseur animé lorsqu'il anime la transition d'une configuration CSS à une autre. Lorsque le curseur change son style d'un style à l'autre, nous pouvons déterminer que le curseur est animé. Nous pouvons également utiliser différentes couleurs pour le curseur animé, donc le curseur change sa couleur avec le temps. Nous pouvons rendre notre site Web ou nos projets plus attrayant en utilisant le curseur animé. Il attire l'utilisateur vers lui. Ce guide discutera de la façon de faire le curseur animé dans CSS. Pour cela, nous devons utiliser du code HTML et JavaScript. Nous concevons ici des curseurs animés en utilisant HTML, CSS et JavaScript.

Exemple 1

Pour créer le curseur animé, nous utilisons HTML, CSS et JavaScript dans ce code. Tout d'abord, nous devons faire le fichier HTML dans le code Visual Studio. Vous pouvez utiliser n'importe quel éditeur de votre choix. Ici, nous utilisons le code Visual Studio. Nous sélectionnons la langue du code HTML comme «HTML». Puis écrivez le code ici. Nous fournissons également le code du curseur animé dans cet exemple. Vous pouvez utiliser ce code pour fabriquer le curseur animé. Maintenant, commencez avec le code HTML.

Nous créons la classe «div» «curseur» et une classe «section» nommée «Main» à l'intérieur du «div». Ensuite, nous créons le titre suivant, notre titre 1, et fermons la balise «Section» ici. Ensuite, nous utilisons «javascript» dans ce fichier «html». Nous utilisons la balise «Script», et dans son type, nous donnons le nom du «JavaScript», qui est «Text / JavaScript». Avec cela, nous définissons le curseur «const» et utilisons la «requête. sélecteur". La requête. Sélecteur "est utilisé pour retourner l'élément," Document ", qui correspondra au sélecteur, et ce sélecteur est" curseur ".

Maintenant, nous utilisons «var» et l'avons nommé «timeout». Vient ensuite la méthode «Adveventlisner». Il attachera un gestionnaire d'événements à l'élément que nous spécifions ici. L'événement ici est le «MouseMove», qui s'attache à l'élément «document». Nous utilisons «Let» pour déclarer une variable «X» et l'initialiser avec «e.pagex ". La propriété «Pagex» renverra l'axe horizontal du curseur lorsque l'événement du curseur est déclenché. Et la variable «y» avec le même type de données «Let», initialisez ce «y» avec «e.Pagey ”. La propriété «Pagey» renverra l'axe vertical du curseur lorsque l'événement du curseur est déclenché. Réglez également le «curseur. Style "à" Top "," Left "et" Affichage ".

Après cela, nous utilisons la «fonction Mousestopped», donc lorsque cette fonction appelle, elle affichera «aucune». Ensuite, nous utilisons la fonction «délai d'expiration» et passons «Timeout» comme paramètre et définissons ce «délai d'expiration» ci-dessous. Nous utilisons à nouveau «AddeveNetLisner» et fermons la balise «script» ici. Il s'agit de «htmlhtml» et «javascript». Maintenant, nous allons utiliser CSS pour le style.

Code CSS

Dans le CSS, nous importons «l'URL» et utilisons le sélecteur «*», qui est utilisé pour sélectionner tous les éléments. Nous avons réglé la «marge» et le «rembourrage» à l'intérieur du sélecteur «*» sur «0». La «dimensionnement de la boîte» que nous définissons ici est «Border-Box», qui est utilisée pour spécifier le comportement de la «largeur» et de la «hauteur» et de la sélection de la «Font-Family». Ensuite, nous utilisons «corps» et réglons la hauteur sur «100vh». Le «fond» est «noir» et définit le «curseur» à «aucun».

Maintenant, nous stylisons le «Main», et sa taille est définie comme «100vh». Nous utilisons l'affichage «Flex» et «Justify-Content» au «Centre», également «Align-Item» au «Centre». Appliquez la couleur «blanc» sur le «H1» et utilisez le «0.Valeur alpha de 8 ”pour ce. Nous avons réglé la «taille de police» de cette tête vers «65px». Maintenant, définissez «l'index z» du «curseur» comme «999». La «position» est «fixe» et définie comme «fond». La «largeur» et la «hauteur» sont toutes deux «20px», et le «Border-Radius» est «50%». «Pointer-Event» est «aucun». Le «Box-Shadow» ajoutera une ou plusieurs ombres autour du cadre des éléments. Nous avons réglé le «H-Offset», qui est le décalage horizontal, sur «0», et le «V-offset», qui est le décalage vertical, à «0», et le «flou» est «20px» et « bleu". Le même «H-Offset» et «V-Offset» sont dans les deux lignes suivantes, mais la valeur «Blur» change dans chacune en tant que «60px» et «100px».

Nous utilisons l'animation pour «5s» et la propriété «Transform: Translating» ici. De plus, définissez son «affichage» sur «aucun». Maintenant, les images clés sont utilisées pour l'animation. De plus, nous utilisons ici le sélecteur «avant» et définissons le «contenu» avant cela. Réglez la «position» sur «absolu» et «fond» sur «bleu». La «largeur» et la «hauteur» est «50px». «L'opacité» que nous utilisons est «0.2 ”, et la propriété« transform-translate »est là. Le «Border-Radius» est «50%».

Sortir

Vidéo playerhttps: // linuxhint.com / wp-content / uploads / 2022/06 / cursor_animation_on_mousmove_mouseout_moussestopped_profile_1.MP400: 0000: 0000: 09 Utilisez les touches de flèches UP / Down pour augmenter ou diminuer le volume.

Exemple n ° 2

Dans cet exemple, nous créons le fichier JavaScript externe et lions ce fichier à notre fichier HTML et lions le fichier CSS.

Nous créons une classe «principale» nommée «bg_canvas» à l'intérieur de ce. Nous avons une classe «div» «en-tête». Nous créons la rubrique dans ce «div». L'autre nom de div est «curseur» et, après le deuxième «div», nous fermons le «Main» et lions le fichier javascript ici. Nous avons placé le nom du fichier javascript, «AnimatedMouse.JS ", et a fermé la balise" Script ".

Code CSS

Nous définissons la «racine», qui sélectionne les éléments racinaires dans le HTML et définit la couleur «noir», la couleur «bleue» et la couleur «blanc» sous forme «RVB» et «vert» dans «RVB». Ensuite, nous utilisons le sélecteur «*», qui sélectionne tous les éléments, et nous faisons un style ici, qui s'appliquera à tous les «éléments». Nous venons de définir «marge» et «rembourrage» ici à «0».

Ensuite, nous stylisons «l'en-tête». La «largeur» et la «hauteur» de l'en-tête sont respectivement «100%» et «300px»,. Le «dimensionnement de la boîte» est «Border-Box», et «l'affichage» est «flex». Nous «justifons-contenu» et «Align-Item» dans le «Centre». Nous stylissons également le «curseur» et définissons la «largeur» et la «hauteur» comme «20px» chacun. Nous avons également réglé la «bordure» sur la largeur «10px» du type «solide» et réglé la couleur de la bordure. La «durée de transition» que nous utilisons est «200 ms». Nous utilisons «l'animation» et animé le curseur pour «550». Ensuite, nous utilisons le sélecteur «After» avec le «curseur» et définissons le contenu. Nous définissons également «largeur» et «hauteur» comme «40px», «frontière» comme «15px» dans le type «solide», «frontraire» comme «50%» et «absolu» en «position». Le «haut» et la «gauche» est défini comme «-25px» pour chacun et utilise ensuite la propriété «Animation». Vient maintenant le «Header-Titre» et le style. Nous avons réglé sa «famille de police», et le «poids» de cette police est «300». Nous l'alignons dans le «centre» et «-Size» est «60px». La «couleur» est «noir» pour la police. Maintenant, nous allons styliser «BG_CANVAS», qui est le nom de la classe «Main». Sa «largeur» est «100%» et «hauteur» est «100vh» et définit son «couleur arrière-plan» et «dimensionnement de la boîte».

Après cela, nous utilisons «Cursor-Expand» et la propriété «Animation». Nous avons également défini la «frontière» pour cela. Ensuite, nous utilisons le sélecteur «After» avec cette «expression de curseur» et définissons sa «bordure». Ensuite, nous utilisons ici les «images clés», que nous utilisons pour l'animation, et utilisons l'échelle de transformation «à partir de» (1) «vers» l'échelle de transformation (1.5), et la même chose dans les lignes suivantes:

Code javascript

Dans l'image suivante, c'est le code javascript. Et ce code est le même que le code JavaScript précédent, que nous avons expliqué dans notre premier exemple. Nous enregistrons le fichier JavaScript avec le «.Extension de fichier JS »et doit lier ce fichier avec notre fichier html.

Sortir

Vidéo playerhttps: // linuxhint.com / wp-content / uploads / 2022/06 / animé-cursor-in-css-profile-1-microsoft_-edge-2022-06-03-11-07-03.MP400: 0000: 0000: 09 Utilisez les touches de flèches UP / Down pour augmenter ou diminuer le volume.

Conclusion

Dans ce guide, nous avons discuté du curseur animé dans CSS. Nous avons écrit cet article pour expliquer comment faire de votre curseur un curseur animé en utilisant CSS. Nous avons utilisé différentes propriétés dans CSS, et nous avons utilisé le code HTML et JavaScript et avons lié ces fichiers pour fabriquer le curseur animé. Nous avons exploré deux exemples différents pour faire le curseur animé de styles différents. J'espère qu'après avoir lu cet article, vous rendra le curseur animé dans vos sites Web pour rendre votre site Web plus attrayant.