Less绘制绕盒子的运动光束

前端

2023-12-23 02:56:45

在Less这个强力且功能多样的CSS扩展语言中，你可以使用各种强大的特性来创建复杂而引人入胜的动画效果。其中一种效果便是绕着元素绘制运动光束，它可以通过巧妙地结合伪类选择器和Less的强大函数来实现。

了解伪类选择器

伪类选择器允许你为处于特定状态的元素应用样式。在我们的情况下，我们将使用:hover伪类，它将在鼠标悬停在元素上时激活样式。

Less函数的妙用

Less提供了一系列强大的函数，可以用来操纵颜色、尺寸和其他值。为了创建运动光束，我们将使用lighten()函数来减淡颜色，以及spin()函数来创建绕着元素盒子的径向梯度。

代码实现

首先，让我们定义一个简单的HTML元素，它将作为光束的容器：

<div class="container"></div>

然后，我们在Less中定义样式：

.container {
  width: 200px;
  height: 200px;
  background-color: #000;
  position: relative;
}

.container:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border: 10px solid #fff;
  border-radius: 50%;
  animation: beam 2s infinite linear;
}

@keyframes beam {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}