用CSS变量实现鼠标悬停动效

先放两张效果图。

前两天在微信公众号JavaScript里看到一篇文章 --- 《利用CSS变量实现令人震惊的悬浮效果》，觉得好好看好好玩，就自己动手写了一下。

　　

页面DOM。

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

鼠标悬停动效，顾名思义，跟鼠标是有很大关系的。首先，我们得 知道鼠标的位置。

1 document.querySelector('.button').onmousemove = (e) => {
2 　　const x = e.pageX - e.target.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、监听元素的鼠标移动事件；

2、计算鼠标相对元素的位置；

3、将鼠标位置存入css变量中（--x，--y）。

利用css实现动效　

 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;
10 　　　　outline: none;
11 　　　　overflow: hidden;
12 　　　　border-radius: 100px;
13 　　　　transition: all .15s ease,transform .2s ease-in-out;
14 　　}
15 　　.button >span{
16 　　　　position: relative;
17 　　　　pointer-events: none;
18 　　　　/*文字禁止选中*/
19 　　　　-webkit-user-select: none;
20 　　}
21 　　.button::before {
22 　　　　--size: 0;
23 　　　　content: ' ';
24 　　　　position: absolute;
25 　　　　left: var(--x);
26 　　　　top: var(--y);
27 　　　　width: var(--size);
28 　　　　height: var(--size);
29 　　　　background: radial-gradient(circle closest-side, #402bf2, transparent);
30 　　　　transform: translate(-50%, -50%);
31 　　　　transition: width .2s ease, height .2s ease;
32 　　}
33 　　.button:hover::before {
34 　　　　--size: 400px;
35 　　}
36 　　.button:hover{
37 　　　　box-shadow: 0 5px 45px rgba(0,0,0,.4);
38 　　　　transform: scale(1.03);
39 　　}

好啦，图一炫酷的动画效果出现啦~~~

图二是用 css3 transform 的3D效果实现的。主要css代码是

transform: rotateX(var(--y)) rotateY(var(--x)) translateZ(var(--z));

需注意的是使用 translateZ 或其它css 3D效果，需要为3D元素的父容器设置perspective属性，用来指定视距。

css3 3D transform变换  可以看看https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/