个人博客:[译] CSS 变量实现炫酷鼠标悬浮效果html
我最近从Grover网站上的有趣的悬停动画中得到灵感。将鼠标移动到订阅按钮上能够显示光标移动后的彩色渐变。这个想法很简单,但结果是一个按钮从复位和等待点击中脱颖而出。浏览器
那怎样实现相似的效果使咱们的网站一样出色呢?很好,它并无你想象的那么困难!sass
咱们须要作的第一件事即是跟踪鼠标光标的位置。app
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`)
}
复制代码
是的,只须要 6 行代码就可让你的 CSS 知道用户鼠标的位置。经过这些信息你能够实现更多更庞大的效果。可是让咱们先实现 CSS 部分……iphone
咱们已经将鼠标坐标存储在 CSS 变量中,因此能够在 CSS 中的任何地方使用它们。(如下为 SCSS 代码)ide
.button {
position: relative;
appearance: none;
background: #f72359;
padding: 1em 2em;
border: none;
color: white;
font-size: 1.2em;
cursor: pointer;
outline: none;
overflow: hidden;
border-radius: 100px;
span {
position: relative;
}
&::before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #4405f7, transparent);
transform: translate(-50%, -50%);
transition: width .2s ease, height .2s ease;
}
&:hover::before {
--size: 400px;
}
}
复制代码
span
中,防止渐变层覆盖到文字上方width
和 height
为 0px
而且当鼠标悬浮在按钮上时将它们增长到 400px
。不要忘记设置 transition
让它有个渐入的效果radial-gradient
到 background
上并使用 closest-side circle
。 closest-side
使得 background
充满整个 before
但又没有超出它。就这样,添加缺乏的 HTML 就能够了:性能
<button class="button">
<span>Hover me I'm awesome</span>
</button>
复制代码
在线预览动画
See the Pen Mouse movement button with border-radius by Tobias Reich (@electerious) on CodePen.网站
只需对鼠标的位置做出反应,便可创建如此多的效果。它很是华丽而且使得👌互动如此有趣。
如下是我在basicScroll的网站上使用的相似动画:
May the hover be with you https://t.co/2jrmVorLRW
或者看中并创建一个 3D 视差按钮:
3D parallax button with JS controlled CSS variables @CodePen 🎉 https://t.co/qE0woiNip8 https://t.co/Wyi0xjRzPq
可能性是无止境的。你能够在下方评论区分享你使用它建立的效果👇。
Q: 为何使用 width
和 height
而不是使用 transform: scale()
实现动画呢?
A: 对于动画的性能, width
和 height
是很差的,你可能会尽可能地尝试使用 transform
。你为何我不这样作呢?问题在于浏览器在加速图层中呈现元素(正在转换)。当按钮具备非矩形边缘时,此图层可能会致使问题。
Q: 为何改变 top
和 left
而不是 transform: translate()
呢?
A: 参照上条。
Q: 我能够在 Twitter 关注你吗?
A: 固然。(原做者推特 @electerious)