先放两张效果图。
前两天在微信公众号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/
用CSS变量实现鼠标悬停动效
原文地址：https://www.cnblogs.com/stronggirlyao/p/9257858.html