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 :
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
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é.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.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
OK, continuez, faisons quelque chose de plus éblouissant. Eh bien, c'est le genre flashy. sweat_smileSi 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
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!