标签：选中 dom pos 鼠标悬停 add javascrip 手写 cursor href
先放两张效果图。
前两天在微信公众号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/
标签：选中 dom pos 鼠标悬停 add javascrip 手写 cursor href
原文地址：https://www.cnblogs.com/stronggirlyao/p/9257858.html
