封装一个 breath 呼吸样式

使用 Less 作为页面的样式预处理器使得开发者能够将一些项目中常用的 css 效果如同 js 函数那样封装起来。

本文将项目中用到的 “呼吸” 效果封装成 Less 中的 Mixin 并放入公共文件中，通过这种方式大大提升了可复用性和可维护性。

1. 呼吸样式代码

首先找到项目根目录，在其中创建一个名为 common.less 的样式文件，然后在其中写入下面的代码：

@outlineColor: 'rgba(255, 181, 82)';

.breathing-animation(@thickness, @mid-multiplier, @end-multiplier, @str) {  
  0% {  
    outline: @thickness solid replace(e(@str), "[)]", ",0.7)");  
  }  
  50% {  
    outline: @thickness * @mid-multiplier solid replace(e(@str), "[)]", ",0.4)");  
  }  
  100% {  
    outline: @thickness * @end-multiplier solid replace(e(@str), "[)]", ",0.1)");  
  }  
}  

@keyframes breath_light {  
  .breathing-animation(0.1344vw, 3, 5, @outlineColor);  
}  

.breath() {
  cursor: pointer;
  outline: 0.1344vw solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 6/14.88vw 2/14.88vw #ffb552, 0 2/14.88vw 4/14.88vw 0 rgba(0, 0, 0, 0.5), inset 0 0 1/14.88vw 0 #000000, inset 2/14.88vw 2/14.88vw 5/14.88vw 0 rgba(255, 255, 255, 0.7);
  animation: breath_light 1.5s ease infinite;
}

这段代码是使用Less CSS预处理器编写的，其目的是定义一个带有“呼吸”动画效果的CSS类。下面是对代码的解释：

1. 变量定义:

@outlineColor: 'rgba(255, 181, 82)';

这定义了一个变量@outlineColor，它的值是rgba(255, 181, 82)，代表一种橙色。

2. Mixin定义:

.breathing-animation(@thickness, @mid-multiplier, @end-multiplier, @str) { ... }

这是一个名为.breathing-animation的mixin（混合），它接受四个参数，并定义了三个关键帧的动画效果，分别对应于动画的0%、50%和100%的进度。

在这个mixin中，主要的变化是outline属性的值，它会根据传入的参数和动画的进度进行变化。特别地，replace(e(@str), "[)]", ",0.x)")这部分代码用于替换颜色值中的alpha通道值，从而改变颜色的透明度。 3. 关键帧定义:

@keyframes breath_light {  
  .breathing-animation(0.1344vw, 3, 5, @outlineColor);  
}

这里定义了一个名为breath_light的关键帧动画。它使用了前面定义的.breathing-animation mixin，并为其提供了具体的参数值。 4. .breath 混入的定义:

.breath() { ... }

这是一个CSS类的定义，当元素具有这个类时，它会有一系列的样式效果，其中最显著的是它有一个名为breath_light的动画效果，这个动画会无限循环，并且每次循环持续1.5秒。

在这个类中，还定义了outline、box-shadow等属性，为元素提供了静态的视觉效果。

当某个元素使用了 .breath 混入时，它会显示一个橙色的外边框，并且这个外边框会有一个“呼吸”的动画效果，即它会逐渐变粗并变淡，然后再逐渐变细并变深，如此往复。此外，该元素还会有一些其他的视觉效果，如阴影和内阴影。

2. 样式的使用

在需要使用这个效果的其它 Less 文件中，通过 import 关键字引入 common.less 文件。这样就可以直接使用名为 .breath 的 Mixin 了。

@import "path/to/common.less"; // 替换为 common.less 文件的实际路径

.active {
  .breath();
}

3. 效果展示

掘金的这个在线编辑器帧率太低了，效果不好，建议大家将代码拷到本地运行。代码就在 Markup 和 Style 中。