前端常用的几种 LESS Mixins 第二弹

慕仲卿
210 阅读3分钟

最近一直忙着写代码了，都没怎么记录。这两天清闲下来了，打算将之前写的一些样式记录下来，封装以利于下次直接使用。喜欢的同学可以收藏起来，方便不时之需。

上一篇地址：前端常用的几种 LESS Mixins - 掘金 (juejin.cn)

今天要介绍的样式有五个，它们分别是：

  1. 悬浮变大效果
  2. 悬浮渐出下划线效果
  3. 彩色边框线效果
  4. 自定义鼠标效果
  5. 3D 按钮效果

我使用的预编译器是 Less。Less 中的 Mixin 类似于 Js 中的函数，可以将已经实现好的样式封装起来。下面让我们逐个看来。

1. 悬浮变大效果

.hoverBig() {  
  &:hover {
    transform: scale(1.1);  
    filter: sepia(100%); /* 或者使用其他滤镜效果 */  
  }
  transition: transform 0.3s, filter 0.3s;  
}

原理说明

当鼠标悬浮在元素上时，使用CSS的:hover伪类来触发特定的样式变化。transform: scale(1.1);用于将元素的大小放大到原始尺寸的110%。同时，filter: sepia(100%);为元素应用了一个深褐色的滤镜效果，可以在悬浮时改变元素的颜色表现。transition属性则用来定义元素状态变化时的过渡效果，使元素的变换更加平滑。

效果如下所示：

big.gif

2. 悬浮渐出下划线效果

.hoverLine() {
  position: relative;
  display: inline;
  text-decoration: none; 
  &::after {  
    content: '';  
    position: absolute;  
    bottom: 0;  
    left: 0;  
    width: 0;  
    height: 2px;  
    background-color: #000;  
    transition: width 0.3s;  
  }  
  &:hover::after {  
    width: 100%;  
  }
}

效果如下所示：

line.gif

原理说明

利用CSS的伪元素::after在文本下方创建一个空的内容块，并通过position: absolute;将其定位在文本的底部。初始状态下，这个下划线的宽度设置为0，即不可见。当鼠标悬浮在文本上时，通过:hover::after选择器将下划线的宽度变化为100%，从而实现渐出的下划线效果。transition: width 0.3s;则保证了宽度变化的平滑过渡。

3. 彩色边框线效果

.linearBorder(@dir:right;@color1:red;@color2:orange;@color3:yellow;@color4:green;@color5:blue;) {  
  border: 2px solid;  
  border-image: linear-gradient(to right, red, orange, yellow, green, blue) 1;  
}

原理说明

使用CSS的border-image属性，该属性允许你使用图片作为边框。在这个例子中，通过linear-gradient()函数创建了一个线性的颜色渐变，并将其应用到边框上。to right指示渐变的方向是从左到右，后面跟随的颜色值定义了渐变的颜色停靠点。这样，边框就会显示为多彩的渐变效果。

效果如下所示：

image.png

4. 自定义鼠标效果

.cursor(){
  cursor: url('../../../assets/globalView/图标（星）.png'), auto; /* 使用自定义光标图像 */  
}

原理说明

CSS的cursor属性用于改变鼠标指针在元素上时的外观。在这个例子中，cursor属性被设置为一个自定义的图像URL，这意味着当鼠标悬停在应用了该样式的元素上时，鼠标指针会变为指定的图像。如果浏览器无法加载或显示自定义光标，则会使用auto关键字指定的默认光标。

效果如下所示：

border.gif

5. 3D 按钮效果

.threeDBtn(){
  display: inline-block;
  padding: 10px 20px;  
  background-color: #4CAF50;  
  color: white;  
  border: none;  
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);  
  transition: box-shadow 0.3s;  

  &:hover {  
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);  
    transform: translateY(-2px);  
  }
}

原理说明

通过CSS的box-shadow属性给按钮添加阴影效果，创造出3D的视觉效果。初始状态下的阴影较浅，当鼠标悬浮在按钮上时，通过:hover伪类增加阴影的模糊半径和扩展半径，使阴影变得更加明显，同时利用transform: translateY(-2px);稍微上移按钮，给用户一种按钮被按下的视觉效果，从而增强按钮的交互感。transition属性则保证了这些变化能够平滑过渡。

效果如下所示：

btn.gif

希望这些特效能够帮助到你，喜欢的话点个收藏吧~

avatar
文章
阅读
粉丝