Using CSS variables to achieve mouse hover motion effect

Let's put two on the table first.

Two days ago in the public number JavaScript saw an article---"Use CSS variable to achieve shocking suspension effect", feel good optimistic about the fun, I wrote a bit.

　　

The page DOM.

1 <  class= "button"><span>Hover me I ' m awesome</  span></div>

Mouse hover dynamic effect, as the name implies, with the mouse is a very big relationship. First, we need to know the position of the mouse .

1 document.queryselector ('. Button '). onmousemove = (E) = = {2 const x = e.pagex- e.targ Et.offsetleft; 3 Const y = e.pagey- e.target.offsettop; 4 e.target.style.setproperty ('--x ', ' ${x}px '); 5 e.target.style.setproperty ('--y ', ' ${y}px '); 6 }

1. the mouse movement event of the listener element;

2, calculate the position of the mouse relative elements;

3. Place the mouse position in the CSS variable (--x,--y).

Using CSS to achieve dynamic performance　

1 . Button{2 position:relative;3 appearance:None;4 background:#fe1251;5 padding:1em 2em;6 Border:None;7 Color: White;8 font-size:1.2em;9 cursor:Pointer;Ten Outline:None; One Overflow:Hidden; A Border-radius:100px; - transition:All . 15s ease,transform. 2s ease-in-out; -} the . Button >span{ - position:relative; - pointer-events:None; -  　　　　 /*Text No check*/ + -webkit-user-select:None; -} + . Button::before{ A --size:0; at content:"'; - position:Absolute; -  Left:var (--x); - Top:var (--y); - width:var (--size); - Height:var (--size); in background:Radial-gradient (Circle Closest-side, #402bf2, Transparent); - Transform:Translate ( -50%, -50%); to transition:width. 2s ease, height. 2s ease; +} - . Button:hover::before{ the --size:400px; *} $ . Button:hover{Panax Notoginseng Box-shadow:0 5px 45px rgba (0,0,0,.4); - Transform:Scale (1.03); the}

OK, the picture of a cool animation effect appeared ~ ~ ~

Figure II is achieved using the 3D effect of the CSS3 transform. The main CSS code is

Transform:rotatex (Var (--y)) Rotatey (Var (--x)) Translatez (Var (--z));

Note that using Translatez or other CSS 3D effects, you need to set the perspective property for the parent container of the 3D element to specify the distance of sight.

CSS3 3D transform transform to see https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

Using CSS variables to achieve mouse hover motion effect