让你的按钮心动起来

背景

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

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

分析

  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函数的概念没做详细阐述,大家可以自行百度,哦不,自行掘金~

相关推荐
余道各努力,千里自同风1 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave8 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟10 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾31 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧40 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
chusheng18401 小时前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
游走于计算机中摆烂的1 小时前
启动前后端分离项目笔记
java·vue.js·笔记