用CSS變量實現鼠標懸停動效

先放兩張效果圖。

 

前兩天在微信公眾號JavaScript里看到一篇文章 --- 《利用CSS變量實現令人震驚的懸浮效果》，覺得好好看好好玩，就自己動手寫了一下。

　　

頁面DOM。

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

 

鼠標懸停動效，顧名思義，跟鼠標是有很大關系的。首先，我們得 知道鼠標的位置。

document.querySelector('.button').onmousemove = (e) => {
　　const x = e.pageX - e.target.offsetLeft;
　　const y = e.pageY - e.target.offsetTop;
　　e.target.style.setProperty('--x', `${ x }px`);
　　e.target.style.setProperty('--y', `${ y }px`);
}

1、監聽元素的鼠標移動事件；

2、計算鼠標相對元素的位置；

3、將鼠標位置存入css變量中（--x，--y）。

 

利用css實現動效　

.button{
　　　　position: relative;
　　　　appearance: none;
　　　　background: #fe1251;
　　　　padding: 1em 2em;
　　　　border: none;
　　　　color: white;
　　　　font-size: 1.2em;
　　　　cursor: pointer;
　　　　outline: none;
　　　　overflow: hidden;
　　　　border-radius: 100px;
　　　　transition: all .15s ease,transform .2s ease-in-out;
　　}
　　.button >span{
　　　　position: relative;
　　　　pointer-events: none;
　　　　/*文字禁止選中*/
　　　　-webkit-user-select: none;
　　}
　　.button::before {
　　　　--size: 0;
　　　　content: ' ';
　　　　position: absolute;
　　　　left: var(--x);
　　　　top: var(--y);
　　　　width: var(--size);
　　　　height: var(--size);
　　　　background: radial-gradient(circle closest-side, #402bf2, transparent);
　　　　transform: translate(-50%, -50%);
　　　　transition: width .2s ease, height .2s ease;
　　}
　　.button:hover::before {
　　　　--size: 400px;
　　}
　　.button:hover{
　　　　box-shadow: 0 5px 45px rgba(0,0,0,.4);
　　　　transform: scale(1.03);
　　}

 

好啦，圖一炫酷的動畫效果出現啦~~~

 

圖二是用 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/