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 :

<.>Pour la DÉMO complète, vous pouvez cliquer ici pour jeter un œil :

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

Problèmes existants

En ce qui concerne la démo ci-dessus, il y a encore de nombreux défauts, par exemple,

La précision est trop mauvaise

Cela peut. contrôler uniquement le mouvement des éléments vers l'espace où se trouve le div, mais ce n'est pas la position précise de la souris. Pour cela, on peut optimiser en augmentant le nombre de divs cachés. Par exemple, passez de 100 divs en mosaïque à 1 000 divs en mosaïque.

Le mouvement n'est pas assez fluide

L'effet ne semble pas assez fluide. Il faudra peut-être l'optimiser grâce à une fonction d'assouplissement raisonnable et un délai d'animation approprié.

Séchez-vous

Ouais. Maintenant que nous maîtrisons le principe, voyons quels autres effets intéressants nous pouvons créer en utilisant cette technique.

Effet de bouton de suivi de la souris CSS

Au début, j'ai vu l'effet suivant sur CodePen, qui a été implémenté en utilisant SVG + CSS + JS, Je me demandais si je pouvais le copier en utilisant uniquement CSS :

Démo CodePen - Suivi de la souris gluante

D'accord, bien, le l'idéal est très plein et la réalité est très maigre. La simple utilisation de CSS présente encore de nombreuses limites.

• 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

D'accord, jetons un œil à la version faillite simulation utilisant uniquement l'effet CSS :

C'est un peu trop bizarre. Vous pouvez resserrer un peu l'effet en ajustant la couleur et la force du filtre (essayez simplement diverses choses...). ), vous pouvez en obtenir un légèrement meilleur. Effets similaires à YiDiudiu :

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

Souris plein écran suivant animation

OK, continuez, faisons quelque chose de plus éblouissant. Eh bien, c'est le genre flashy. sweat_smile

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!