Comment implémenter l'effet de suivi de la souris en utilisant du CSS pur ? (explication détaillée du code)

Le suivi de la souris, comme son nom l'indique, signifie que les éléments suivront le mouvement de la souris et effectueront les mouvements correspondants. De manière générale, CSS est responsable de la présentation et JavaScript est responsable du comportement. L'effet du suivi de la souris est le comportement, et il nécessite généralement l'aide de JS pour y parvenir.

Bien sûr, l'objectif de cet article est de présenter comment utiliser CSS pour simuler certains effets d'animation comportementale de suivi de la souris sans recourir à JS.

Voyons d'abord à quoi ressemble l'effet de suivi de la souris :

Principe

Prenons la démo ci-dessus comme exemple. Pour utiliser CSS pour implémenter le suivi de la souris, le point le plus important est :

Comment surveiller où se trouve la souris actuelle en temps réel ?

OK, en fait, de nombreux effets CSS sont indissociables du mot « horreur ». Pour détecter où se trouve la souris actuelle, il suffit de couvrir la page avec des éléments :

Nous utilisons 100 éléments pour couvrir toute la page. Au survol, la couleur s'affiche comme suit :

<div class="g-container">
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>
  ... // 100个
</div>

.g-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}
 
.position {
    position: absolute;
    width: 10vw;
    height: 10vh;
}
 
@for $i from 0 through 100 {
     
    $x: $i % 10;
    $y: ($i - $x) / 10;
     
    .position:nth-child(#{$i + 1}) {
        top: #{$y * 10}vh;
        left: #{$x * 10}vw;
    }
 
    .position:nth-child(#{$i + 1}):hover {
        background: rgba(255, 155, 10, .5)
    }
}

Vous pouvez obtenir cet effet :

D'accord, si vous supprimez l'effet de survol de chaque élément, alors la page d'opération à ce moment-là est en fait elle n'a aucun effet. Mais en même temps, grâce à la pseudo-classe :hover, nous pouvons savoir à peu près dans quelle plage de la page se trouve la souris actuelle.

Bien, continuons. Ajoutons un autre élément (une boule ronde) à la page et positionnons-le absolument au milieu de la page :

<div class="g-ball"></div>

.ball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10vmax;
    height: 10vmax;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

Enfin, nous utilisons le ~ frère. sélecteur d'élément, sur la page hover (survolant en fait une centaine de divs cachés), la position de l'élément balle est contrôlée via le div actuellement survolé.

@for $i from 0 through 100{
     
    $x: $i % 10;
    $y: ($i - $x) / 10;
     
    .position:nth-child(#{$i + 1}):hover ~ .ball {
        top: #{$y * 10}vh;
        left: #{$x * 10}vw;
    }
}

À ce stade, un simple effet de suivi de souris CSS pur a été implémenté. Il est pratique pour tout le monde de comprendre. Il suffit de regarder l'image ci-dessous :

Démo CodePen -- CSS pour implémenter le suivi de la souris

Problèmes existants

La précision est trop mauvaise

Le mouvement n'est pas assez fluide

Séchez-vous

Effet de bouton de suivi de la souris CSS

Démo CodePen - Suivi de la souris gluante

• Mais nous pouvons toujours utiliser la méthode présentée ci-dessus pour implémenter le suivi de la souris

• Utiliser le filtre CSS : blur() contrast() pour simuler elements Fusion, pour plus de détails, vous pouvez lire cet article :

  Compétences en matière de filtrage CSS et détails que vous ne connaissez pas

Demo poke me, CodePen Demo -- Effet de bouton de suivi de la souris CSS

Souris plein écran suivant animation

Si nous contrôlons non pas un seul élément, mais plusieurs éléments. Les effets d'animation entre plusieurs éléments sont définis avec différents délais de transition pour retarder le mouvement en séquence. Wow, c'est excitant rien que d'y penser. Par exemple :

CodePen Demo -- Souris suivant l'animation PURE CSS MAGIC MIX

Si nous pouvons être plus imaginatifs, alors vous peut entrer en collision avec plus d'étincelles :

Cet effet est l'œuvre de Yusuke Nakaya, un auteur japonais de CodePen que j'aime beaucoup Code source : Démo - - Uniquement. CSS : Surface de l'eau

Instruction de suivi de la souris

Bien sûr, il n'est pas nécessaire qu'elle indique le mouvement de l'élément. La technique consistant à utiliser des divs pour remplir la page afin de capturer la position actuelle de l'élément peut également être utilisée pour d'autres effets, comme indiquer la trajectoire du mouvement de la souris :

1. Arrière-plan complet par défaut transition-duration: 0.5s

du div 2. Lorsque vous survolez le div d'arrière-plan de l'élément, modifiez le transition-duration: 0s du div actuellement survolé et donnez la couleur d'arrière-plan lors du survol, afin que le div actuellement survolé sera immédiatement affiché

3. Lorsque la souris quitte le div, le transition-duration du div revient à l'état par défaut, qui est transition-duration: 0.5s, et la couleur d'arrière-plan disparaît. de cette façon, la couleur d'arrière-plan du div gauche passera lentement à transparente. L'effet de provoquer des ombres fantômes

CodePen Demo -- transition d'annulation

Enfin.

En fait, il existe de nombreuses utilisations intéressantes. Les étudiants intéressés peuvent le faire eux-mêmes et essayer plus de combinaisons.

Les gens me demandent souvent : ces usages étranges peuvent-ils être utilisés dans le monde des affaires ? Est-ce utile ou pas ? Eh bien, mon opinion est que peut-être qu'il n'est vraiment pas utilisé en entreprise ou que les scénarios d'application sont extrêmement limités, mais en savoir plus à ce sujet peut vous donner plus de choix lorsque vous rencontrez des problèmes, plus d'espace de réflexion et une meilleure réflexion divergente, au moins. inoffensif.

Des CSS plus intéressants auxquels vous n'avez peut-être pas pensé, vous pouvez venir ici pour y jeter un oeil :

CSS-Inspiration -- CSS Inspiration

Bon Okay, cet article se termine ici, j'espère qu'il vous sera utile :)

Cet article est reproduit à partir de : https://www.cnblogs.com/coco1s/p/10481872. html

D'autres codes d'effets spéciaux CSS3, html5, javascript et jQuery sont disponibles sur : collection d'effets spéciaux js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!