Une exploration intéressante de l'interaction souris - pointeur

Partage de ressources de qualité

Guide d'apprentissage（Cliquez pour déverrouiller）	Positionnement des connaissances	Orientation de la population
🧡 PythonApplet de commande de repas Wechat en direct 🧡	Classe supérieure	Ce cours estpython flask+Une combinaison parfaite d'applets Wechat,De la construction du projet au déploiement de Tencent Cloud en ligne,Créer un système de commande de repas complet.
PythonQuantifier les transactions en direct	Niveau d'entrée	Les poignées vous permettent de créer une extension facile、Plus sûr、Un système d'échange quantitatif plus efficace

Aujourd'hui,Pour réaliser une interaction aussi intéressante：

Style original du pointeur de souris,Modifier pour obtenir l'effet désiré,Et ajouter quelques interactions spéciales.

Modifier le style de la souris

Tout d'abord,,Première question,Nous pouvons voir,Dans la figure ci - dessus,Le style du pointeur de la souris a été modifié en un point：

Normalement, ça devrait être ：

Bien sûr.,C'est plus simple ici.,In CSS Moyenne,On peut passer par cursor Styles, Modifier la forme du pointeur de la souris .

Utilisation cursor Modifier le style de la souris

cursor CSS La propriété définit le type de pointeur de la souris , Afficher le style approprié lorsque le pointeur de la souris survole l'élément .

cursor: auto;
cursor: pointer;
...
cursor: zoom-out;
/* Utiliser des images */
cursor: url(hand.cur)
/* Utiliser des images,Et le réglage fallback Sous - sac */
cursor: url(hand.cur), pointer;

Tout le monde devrait le savoir.,En général,,Dans différents scénarios, Choisissez un style de pointeur de souris différent , C'est aussi un moyen d'améliorer l'expérience utilisateur .

Bien sûr., Dans cette interaction , Nous ne voulons pas cursor Le curseur est réglé à n'importe quel style ,Exactement le contraire., Nous devons le cacher .

Adoption cursor: none Masquer le curseur

Ici,Nous passons cursor: none Masquer le pointeur de la souris sur la page ：

{
    cursor: none;
}

Et ainsi de suite., Le pointeur de la souris sur la page disparaît ：

Écouter à travers des événements globaux , Simuler le pointeur de la souris

Puisque,Disparu, On simule simplement un pointeur de souris .

Nous commençons par réaliser un 10px x 10px Circulaire div, Set to Based on Positionnement absolu：

<div id="g-pointer">div>

#g-pointer {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
}

Alors,Sur la page, On a un point noir rond ：

Et voilà.,Écouter à travers les événements,Écouter body Oui. mousemove, Coïncider la position du petit cercle avec la position du pointeur de la souris en temps réel ：

const element = document.getElementById("g-pointer");
const body = document.querySelector("body");

function setPosition(x, y) {
  element.style.transform  = `translate(${x}px, ${y}px)`;                
}

body.addEventListener('mousemove', (e) => {
  window.requestAnimationFrame(function(){
    setPosition(e.clientX - 5, e.clientY - 5);
  });
});

Voilà.,Si ce n'est pas réglé cursor: none, Ce sera un tel effet ：

Encore. body Plus cursor: none, C'est comme simuler un pointeur de souris ：

Sur cette base, Grâce au pointeur de souris actuel ,En fait, oui. div, .Donc nous pouvons lui donner n'importe quel effet interactif .

Prenons l'exemple du début de l'article , Nous avons juste besoin d'utiliser le mode hybride mix-blend-mode: exclusion, Permet au pointeur de souris analogique de changer intelligemment sa propre couleur dans différentes couleurs de fond .

Il y a des questions sur la technique du mode mixte ,Vous pouvez lire mon article： En mode mixte , Adapter intelligemment le texte aux couleurs de fond

Code complet：

<p>Lorem ipsum dolor sit ametp>
<div id="g-pointer-1">div>
<div id="g-pointer-2">div>

body {
    cursor: none;
    background-color: #fff;
}
#g-pointer-1,
#g-pointer-2
{
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background: #999;
    border-radius: 50%;
    background-color: #fff;
    mix-blend-mode: exclusion;
    z-index: 1;
}
#g-pointer-2 {
    width: 42px;
    height: 42px;
    background: #222;
    transition: .2s ease-out;
}

const body = document.querySelector("body");
const element = document.getElementById("g-pointer-1");
const element2 = document.getElementById("g-pointer-2");
const halfAlementWidth = element.offsetWidth / 2;
const halfAlementWidth2 = element2.offsetWidth / 2;

function setPosition(x, y) { 
    element.style.transform  = `translate(${x - halfAlementWidth}px, ${y - halfAlementWidth}px)`;       element2.style.transform  = `translate(${x - halfAlementWidth2}px, ${y - halfAlementWidth2}px)`;
}

body.addEventListener('mousemove', (e) => {
  window.requestAnimationFrame(function(){
    setPosition(e.clientX, e.clientY);
  });
});

Nous pouvons parfaitement restaurer l'effet de la carte ：

Code complet,Tu peux le piquer ici：Mouse Cursor Transition

Déclencheur d'événements de pseudo - classe

Il y a une chose à noter, Utilisez un pointeur de souris analogique pour Hover Élément,Click Quand les éléments, Aucun de ces événements ne peut être déclenché .

C'est parce que, Sous le pointeur caché , En fait, en suspension, nous simulons le pointeur de la souris ,Donc,,Tous les Hover、Click Les événements sont déclenchés au - dessus de cet élément .

Bien sûr., C'est aussi très bien résolu , Nous avons juste besoin de donner l'élément du pointeur analogique ,Ajouter pointer-events: none, Bloquer les événements par défaut de la souris , Laissez passer l'événement ：

{
    pointer-events: none;
}

Suivi de la souris,Pas seulement ici.

Bien sûr., Le noyau ici est une souris qui suit l'animation ,En coordination cursor: none.

Et,Suivi de la souris, Nous n'avons pas à utiliser JavaScript.

Je suis Incroyable pureté CSS Réaliser le suivi de la souris Dans un article, Introduit un CSS Effet de suivi de la souris réalisé ,Les personnes intéressées peuvent également voir.

Basé sur la pureté CSS La souris suit ,Coopération cursor: none, Vous pouvez aussi faire des animations intéressantes .Comme ça.：

CodePen Demo – Cancle transition & cursor none

Enfin

C'est la fin de cet article,J'espère que ça t'aidera

Encore plus merveilleux CSS Les articles techniques sont résumés dans mon Github – iCSS ,Mise à jour continue,Bienvenue à star Abonnement à la collection.

Si vous avez d'autres questions ou suggestions,Peut communiquer beaucoup,Article original,Stylo limité,Peu talentueux et peu instruit,S'il y a une erreur dans le texte,Wan Wang a dit.

Oui. Get Au plus intéressant CSS Information,Ne ratez jamais mon iCSS Numéro public ：

Si vous trouvez l'article utile,N'hésitez pas à offrir une récompense.Votre soutien m'encouragera à continuer à écrire！Récompense et soutien+## (^_)Une récompense pour un café(^_)