[译]CSS变量实现酷炫的悬停效果

我最近受Grover网站上有趣悬停动画的启发。 将鼠标移动到订阅按钮上可以显示光标移动后的彩色渐变。 这个想法很简单,但效果是按钮会脱颖而出,并得到点击。

我们怎样才能达到类似的效果,让我们的网站脱颖而出呢? 其实,它不像你想象的那么难!

跟踪位置

我们首先要获取鼠标的位置。

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变量中

是的,只要9行代码让CSS获取鼠标的位置。 这些信息可以让你获得巨大的效果。 但让我们先完成CSS ...

设置渐变的动画效果

我们现在将坐标存储在CSS变量中,我们可以在CSS中的任何地方使用它们。

.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;
  }
}
  1. 使用span放置文本,避免渐变出现在它的上方
  2. 从宽度和高度的0px开始,在用户悬停按钮时将它变为到400px。但记得设置一个过渡,使它像旋风似的
  3. 使用坐标来跟随鼠标
  4. 在整个::before,background使用radial-gradient以及circle closest-side。

结果

把它添加到html

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

效果如上图所示。

问题与解答

为什么对宽度和高度添加动画而不是使用transform:scale()?

对宽度和高度添加动画性能是很差的,应该尽可能使用transform。 那为什么我不这样做呢? 问题在于浏览器在加速图层中渲染元素(正在转换)。 当按钮是非矩形边缘时,此图层可能会导致问题。

编辑:有使用transform的方法,但有些浏览器不喜欢它。 不使用transform来转换也是一种可能的解决方案。 Safari还有一个解决方法可以解决这些剪辑问题。

为什么改变top和left而不是使用transform:translate()?

见上面的解释。

原文:Stunning hover effects with CSS variables

注释:原文还提了两种其他的效果,这两种效果是在youtube上演示,有兴趣可以查看原文。

版权声明:著作权归作者所有。

相关推荐

Pandas对应SQL的in和not in实现

在Pandas提供了pd.isin(),使用它可以实现SQL的in和not in。not in 对应于:~a.isin(b) 示例:假如有以下dataframe数据,它包含了列data如下:>>> df   data 0   a 1   b 2 &nb

如何使用CSS变量让响应式变得超级简单

本文是关于如何在2018年创建响应式网站的快速教程。如果你之前没有听说过CSS变量,它就是CSS的新增功能,它让你可以在样式里使用变量的功能,而无需进行任何设置。实质上,CSS变量允许你跳过设置样式的旧方式:h1 {   font-size: 30px; } navbar > a {   font-si

[译]5分钟内学习CSS变量

CSS自定义属性(也称为变量)对于前端开发人员来说是一个巨大的胜利。 它将变量的强大功能引入CSS,从而减少重复,代码更可读以及更灵活。另外,与CSS预处理器的变量不同,CSS变量实际上是DOM的一部分,它是有很多好处。 所以他们基本上像SASS和LESS的变量。 在这篇文章中,我会给你一个关于这种新技术如何工作的速成课程。我还创建了一个免费的关于CSS变量的课程,它

Kotlin实现Java的三元条件运算

在Kotlin没有类似Java的三元条件运算:a ? b : c 在Kotlin有几种等效的方法:ifval r =if (a) b else c whenval r = when(a) {     true 

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主