让你的按钮心动起来

背景

不知道大家日常学英语不,英语对未来的直接上限的提升其实有巨大的作用。有一款语言学习软件可能大家都听过------多邻国,是目前日活和评价最高的外语学习软件之一。它的设计非常简约个性,特别是所有的按钮都有一个"心动"的交互效果,很有意思,嗯,我们的产品也觉得不错。所以怎么实现的问题就到了我这里,真是幸运,咱也是喜欢挑战的,于是花了半天整了个函数实现了通用的效果,提供给小伙伴开发使用。这里放个视频先展示一下效果。

不太会截图,大家凑活看:)

分析

  1. 首先这个效果是按钮的按住效果,我们可以使用:active伪类来实现
  2. 按钮被按下的时候阴影消失了,而且是整个按钮下降了阴影的高度
  3. 整个过程有一个简单的过渡动效

简单翻译为css代码

假定我们有一个宽 692px 高96px的按钮,阴影为10px,主体按钮的背景为#57cc02,阴影的颜色为#47a302那么我们按钮的初始状态为:

相应的代码:

css 复制代码
 .btn-play {
      display: flex;
      width: 6.92rem;
      height: 0.96rem;
      align-items: center;
      justify-content: center;
      font-size: 0.32rem;
      color: #fff;
      font-weight: bold;
      background: #57cc02;
      border-radius: 0.24rem;
      box-shadow: 0 .1rem 0 0 #47a302;
    }

让我们的按下时阴影消失且高度下降,我们需要添加如下样式:

css 复制代码
 .btn-play:active {
     box-shadow: 0 0 0 transparent;
     transform: translateY(.1rem);
 }

可以看到,当按钮被按下的时刻,按钮的阴影变为了透明,高度从y轴向下减少了10px,但是这个动作是瞬时变化的,并没有过渡效果。那么我们再加一行代码:

css 复制代码
     transition: all 0.1s ease-in-out;

这时,我们的按钮就有了心跳的感觉了,css真的能化腐朽为神奇~

进阶

我们在多邻国中学习的时候,发现几乎所有的按钮都有这个效果,各种颜色各种形状的,那么我们自己也需要设计多种形状多种颜色的有这种效果的按钮,难道每次都要cv一段这个代码,并且修改颜色高度吗。感觉会有点小累,但也不是不可接受。不过作为高贵的牛马,咱也要学会为我们的代码施加一点小魔法------抽象方法。好在各个css预编译器都为我们提供了封装css方法的功能。这里仅介绍一下less的方法封装。

  1. 我们定义一个.heart-btn方法
  2. 很明显我们只需要设计阴影的颜色与高度即可,假定我们只需要纯色阴影,所以我们传入这两个参数@color和@shadowheight 代码如下:
less 复制代码
  .heart-btn(@color,@shadowheight) {
    box-shadow: 0 @shadowheight 0 0 @color;
    transition: all 0.1s ease-in-out;
    &:active {
      box-shadow: 0 0 0 transparent;
      transform: translateY(@shadowheight);
    }
  }

那么我们的按钮样式现在就可以变为:

less 复制代码
 .btn-play {
  display: flex;
  width: 6.92rem;
  height: 0.96rem;
  align-items: center;
  justify-content: center;
  font-size: 0.32rem;
  color: #fff;
  font-weight: bold;
  background: #57cc02;
  border-radius: 0.24rem;
  .heart-btn(#47a302, 0.1rem);
}

仅仅多了一行函数调用,贴一下代码效果:

总结

本文提供了一种按钮的按下效果实现的方法,同时引入了less函数的封装与使用,希望能为遇到这个场景的小伙伴提供一些思路。本文涉及的less函数的概念没做详细阐述,大家可以自行百度,哦不,自行掘金~

相关推荐
mCell3 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip3 小时前
Node.js 子进程:child_process
前端·javascript
excel6 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel7 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼8 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风9 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix10 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript