背景
不知道大家日常学英语不,英语对未来的直接上限的提升其实有巨大的作用。有一款语言学习软件可能大家都听过------多邻国,是目前日活和评价最高的外语学习软件之一。它的设计非常简约个性,特别是所有的按钮都有一个"心动"的交互效果,很有意思,嗯,我们的产品也觉得不错。所以怎么实现的问题就到了我这里,真是幸运,咱也是喜欢挑战的,于是花了半天整了个函数实现了通用的效果,提供给小伙伴开发使用。这里放个视频先展示一下效果。
不太会截图,大家凑活看:)
分析
- 首先这个效果是按钮的按住效果,我们可以使用:active伪类来实现
- 按钮被按下的时候阴影消失了,而且是整个按钮下降了阴影的高度
- 整个过程有一个简单的过渡动效
简单翻译为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的方法封装。
- 我们定义一个.heart-btn方法
- 很明显我们只需要设计阴影的颜色与高度即可,假定我们只需要纯色阴影,所以我们传入这两个参数@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函数的概念没做详细阐述,大家可以自行百度,哦不,自行掘金~