让你的按钮心动起来

背景

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

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

分析

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

相关推荐
开心工作室_kaic33 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具1 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml43 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事3 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶3 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo3 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx