Mouse following, as the name suggests, means that the elements will follow the movement of the mouse and make corresponding movements. Generally speaking, CSS is responsible for presentation and JavaScript is responsible for behavior. The effect of mouse following is behavior, and it usually requires the help of JS to achieve it.
Of course, the focus of this article is to introduce how to use CSS to simulate some mouse-following behavioral animation effects without resorting to JS.
Let’s first take a look at what the mouse following effect looks like:
Taking the above Demo as an example, to use CSS to implement mouse following, the most important point is:
How to monitor where the current mouse is in real time?
OK, in fact, many CSS effects are inseparable from the word "eyesore". To monitor where the current mouse is, we only need to cover the page with elements:
We use 100 elements to cover the entire page. When hovering, the color is displayed. The core SCSS code is as follows :
<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) } }
You can get this effect:
Okay, if you remove the hover effect of each element, then the operation page at this time is actually It has no effect. But at the same time, through the :hover
pseudo-class, we can roughly know which range the current mouse is on the page.
Okay, let’s continue. Let’s add another element (a round ball) to the page and position it absolutely to the middle of the page:
<div class="g-ball"></div>
.ball { position: absolute; top: 50%; left: 50%; width: 10vmax; height: 10vmax; border-radius: 50%; transform: translate(-50%, -50%); }
Finally, we use ~
Brothers The element selector, when on the hover
page (actually hovering a hundred hidden divs), controls the position of the ball element through the div currently hovered to.
@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; } }
At this point, a simple pure CSS effect of mouse following has been achieved. It is convenient for everyone to understand. Just look at the picture below to understand:
For the complete DEMO, you can click here to take a look: CodePen Demo -- CSS to implement mouse following
Judging from the above Demo, there are still many flaws, such as
The accuracy is too poor
It can only control the movement of elements to the space where the div is located, but It is not the precise position of the mouse. For this, we can optimize by increasing the number of hidden divs. For example, increase from 100 tiled divs to 1000 tiled divs.
The movement is not smooth enough
The effect does not look smooth enough. This may need to be optimized through a reasonable easing function and appropriate animation delay.
Yeah. Now that we have mastered the principle, let’s take a look at what other interesting effects we can create using this technique.
CSS mouse follow button effect
At first, I saw the following effect on CodePen, which was implemented using SVG CSS JS. Just thinking, using only CSS, can I copy it:
CodePen Demo -- Gooey mouse follow
Okay, Ideal is full, the reality is very skinny. Just using CSS still has many limitations.
But we can still use the method introduced above to implement mouse following
Use CSS filter filter: blur() contrast() to simulate elements Fusion, you can read this article for details: CSS filter skills and details you don’t know
Okay, let’s take a look at the bankruptcy version simulation using only CSS Effect:
It’s a bit too weird. You can tighten up the effect a little. By adjusting the color and filter strength (just try various things...), you can get a slightly better one. Similar effects to YiDiudiu:
Demo poke me, CodePen Demo -- CSS mouse follow button effect
Full screen mouse following animation
OK, continue, let’s do something more dazzling. Well, that's the flashy kind. sweat_smile
If we control more than one element, but multiple elements. The animation effects between multiple elements are set with different transition-delay to delay the movement in sequence. Wow, that’s exciting just thinking about it. For example:
CodePen Demo -- Mouse following animation PURE CSS MAGIC MIX
If we can be more imaginative, Then you can collide with more sparks:
This effect is the work of Yusuke Nakaya, a Japanese CodePen author who I like very much. Source code: Demo - - Only CSS: Water Surface
Mouse Follow Instructions
Of course, it is not necessary to indicate element movement. The technique of using div to cover the page to capture the current position of the element can also be used for other effects, such as indicating the mouse movement trajectory:
1. Default full background The transition-duration of the div: 0.5s
2. When hovering to the element background div, change the transition-duration of the div that the current hover is to: 0s
, and give the background color when hovering, so that the div currently hovered will be displayed immediately
3. When the mouse leaves the div, the transition-duration
of the div changes back to the default state, which istransition-duration: 0.5s
, and the background color disappears at the same time, so that the background color of the left div will slowly transition to transparent, causing a ghost effect
CodePen Demo -- cancle transition
CSS-Inspiration -- CSS Inspiration
Okay Okay, this article ends here, I hope it will be helpful to you:)This article is reproduced from: https://www.cnblogs.com/coco1s/p/10481872.htmlMore cool CSS3, html5, javascript, jQuery special effects codes, all in:
The above is the detailed content of How to implement mouse following effect using pure CSS? (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!