乐趣区

关于前端:CSS-实现按钮点击动效的套路

jiezi

在 Web 中，大部分按钮可能都是平平无奇的，有时候为了强调品牌非凡或者满足非凡性能，可能须要给按钮增加一点点击动效。比方，用过 Ant Design 的小伙伴应该都能发现，在点击按钮的时候会有一个很奥妙的水波动画

这就十分有特色了，看到这样的按钮天然会分割上 Ant Design。

动画过程其实不简单，看了一下官网的实现，是通过 js 动静更改属性实现的，在点击的时候，扭转属性，触发动画，当动画完结之后，再将该属性还原（还原是为了保障下次点击依然有动画），如下

看着如同有点麻烦？其实，这种成果也是能够纯 CSS 实现的，而且还能实现其余更多乏味的成果

一起看看吧~

一、CSS 过渡动画

通常 CSS 中实现动画有两种思路，transition和 animation。一般而言，简略的、须要被动触发（:hover、:active 或者动静切换类名等）的能够用 transition 实现，其余的都能够用animation。

回到这个例子，动画足够简略了，就两个变动，而且须要被动触发（这里是点击，能够想到 :active），所以优先思考用transition 来实现。

察看整个动画，其实就是两个成果叠加而成

  1. 暗影不断扩大
  2. 透明度一直升高

那么，这个动画（过渡）的两种状态能够这样来示意

/* 初始状态 */
button{
  opacity: .4;
  transition: .3s;
}
/* 扩散状态 */
button{box-shadow: 0 0 0 6px var(--primary-color);
  opacity: 0;
}

嗯，两种状态的款式都写好了，怎么触发点击呢？

二、CSS 点击动画

先欠缺一下根本款式，假如 HTML 构造如下

<button class="button">Default</button>

简略丑化一下

:root{--primary-color: royalblue;}
.button{
  padding: 5px 16px;
  color: #000000d9;
  border: 1px solid #d9d9d9;
  background-color: transparent;
  border-radius: 2px;
  line-height: 1.4;
  box-shadow: 0 2px #00000004;
  cursor: pointer;
  transition: .3s;
}
.button:hover{color: var(--primary-color);
  border-color: currentColor;
}

而后增加暗影扩散动画，为了不便透明度的管制，这里用 ::after 伪类独自渲染

.button::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.4;
  transition: .3s;
}

如果依照失常的思路通过 :active 来触发过渡动画，可能会这样来实现

.button:active::after{box-shadow: 0 0 0 6px var(--primary-color);
  opacity: 0;
}

成果如下：

嗯，如同不大对劲？接着往下看

三、CSS 过渡重置

为什么会有下面这种景象呢？这里提一下 :active。:active 只有在鼠标按下时才会起作用，通常在点击一个按钮时，都是轻轻地点击，而不是长按，如果在 :active 上增加动画，那么在鼠标抬起的时候，动画个别都没有完结，所以会导致在鼠标抬起的时候，动画马上就进行了，如果是transition，还会有一个“回退”的过渡成果。

那么，有没有什么办法能够只在鼠标抬起的时候产生动画呢？

我的实现是这样的，假如默认就是有暗影（透明度为 0）的状态，在 :active 的时候迅速去除暗影（这里的“迅速”，是指 勾销按上来的过渡动画），而后因为默认是有过渡的，所以鼠标抬起的时候暗影就回退到有暗影的状态了，这样能够保障按上来是没有动画的，抬起来触发过渡动画

整个流程其实是这样：

勾销过渡动画也很简略，设置时长为 0 就行了，代码实现就是这样

.button::after{
  /* 其余款式 */
  opacity: 0;
  box-shadow: 0 0 0 6px var(--primary-color);
  transition: .3s;
}
/* 点击 */
.button:active::after{
  box-shadow: none;
  opacity: 0.4;
  transition: 0s; /* 勾销过渡 */
}

而后，神奇的成果就进去了！

这样就实现了和 Ant Design 简直雷同的点击成果

四、其余动效案例

下面其实提供了一种思路，只有是这种点击动画，都能够采纳这种形式来实现。比方这样一个刷新按钮，须要点击的时候转一下

用这种思路就很容易了，这个例子比下面那个要简略一些，毕竟只有旋转变动，没有透明度变动，外围代码如下

.icon{transform: rotate(360deg);
    transition: .5s;
}
.button:active .icon{transform: rotate(0);
    transition: 0s;
}

残缺代码能够拜访 ant design button (codepen.io)，整合了更多的 demo

再比方这样的点击粒子动效，原理也是雷同的

在之前文章 CSS 实现一个粒子动效的按钮中曾经有讲到，这里就不多说了，残缺代码能够拜访 button-active (codepen.io)

五、更简单的动画

后面提到过，简略的动画能够用过渡 transition 来实现，那么略微简单点的，比方上面这种 “Q 弹 Q 弹” 的按钮

这类动画，单纯的 transition 就无能为力了，必须借助 animation 来实现，原理还是相似

先定义一个动画关键帧

@keyframes tada {
    from {transform: scale3d(1, 1, 1)
    }
    10%, 20% {transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
    }
    30%, 50%, 70%, 90% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }
    40%, 60%, 80% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }
    to {transform: scale3d(1, 1, 1)
    }
}

这个动画来自于 Animate.css 中的 tada，间接 copy 过去就行

而后让按钮动起来

.button{animation: tada 1s;}

在点击的时候重置动画，间接重置动画，animation可能会更好了解一些，这样在抬起的时候会从新运行动画

.button:active{animation: none;}

这样就实现了，是不是出其不意的容易？

不过有一点小瑕疵，每次页面刷新，按钮会被动进行一次动画（因为动画是主动执行的），如下

那么，如何防止首次进来时动画不执行呢？

这里有一个小技巧，能够在默认状况下设置动画时长为 0，这样在首次动画执行后，马上就完结了，而后在 hover时复原默认的动画时长，因为动画曾经完结，扭转动画时长也不会触发动画再次运行，所以实现就是

.button{animation: jump 0s;}
.button:hover{animation-duration: 1s;}
.button:active{animation: none;}

这样刷新页面就不会再有动画了

接下来，借助 animate.css 你能够更换任意的动画，比方

残缺代码能够拜访 button-jump (codepen.io)，整合了更多的 demo

六、总结和阐明

以上就是对于 CSS 点击动画的几个套路和一些案例，其实就是默认执行动画，点击时重置一下就行了。整体来说代码很简略，只是了解起来可能不是特地顺畅，上面总结一下实现要点：

  1. 简略动画用 transition，其余用 animation
  2. transition 能够通过设置时长为 0 来重置
  3. animation 能够通过设置 none 来重置
  4. 在 :active 时重置动画，点击后会再次运行动画
  5. 简单的动画能够借助现有的动画库，例如 anmate.css
  6. 设置动画时长为 0 能够防止首次渲染呈现动画

相比 js 实现，CSS 实现代码更少，加载更快，无需期待 js 加载实现，体验更优（比方人造反对敲空格键触发），同时也更容易保护和应用，间接复制一个类名就行了。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

退出移动版