十字图标颤动

当我们使用软件时，十字图标（crosshair）通常用于标识某些操作的目标位置，而某些时候需要让这个图标颤动，以给用户一种交互感觉。

在Web开发中，这种效果通常使用CSS的动画特性来实现。

实现方法

首先，我们需要定义一个包含十字线的div元素，并设置一些基本样式：

<div class="crosshair">
  <div class="line horizontal"></div>
  <div class="line vertical"></div>
</div>

CSS样式如下：

.crosshair {
  width: 20px;
  height: 20px;
  position: relative;
  cursor: crosshair;
}

.line {
  position: absolute;
  background-color: black;
}

.horizontal {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
}

.vertical {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
}

这里我们定义了一个名为“crosshair”的类，宽高为20px，相对定位。

图标的两条线分别用名为“horizontal”和“vertical”的类来表示，它们分别水平和垂直居中。

接下来，我们使用CSS动画特性让十字线颤动起来。具体实现方法如下：

@keyframes shake {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-3px, 3px) rotate(-1deg); }
  50% { transform: translate(3px, -3px) rotate(1deg); }
  75% { transform: translate(-3px, 3px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

.crosshair {
  animation: shake 0.5s infinite;
}

我们定义了一个名为“shake”的动画，它在0%时十字线不偏移且不旋转，在一定时间内循环执行“旋转-偏移”的动画，最后回到原始位置。

然后，我们将这个动画应用到“crosshair”类上，并设置无限循环。

结语

在本篇文章中，我们介绍了如何使用CSS动画特性实现十字图标颤动效果。这种交互效果可以在一些场景中增加用户的交互感受和美感。

完整HTML和CSS代码如下：

<div class="crosshair">
  <div class="line horizontal"></div>
  <div class="line vertical"></div>
</div>

.crosshair {
  width: 20px;
  height: 20px;
  position: relative;
  cursor: crosshair;
  animation: shake 0.5s infinite;
}

.line {
  position: absolute;
  background-color: black;
}

.horizontal {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
}

.vertical {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
}

@keyframes shake {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-3px, 3px) rotate(-1deg); }
  50% { transform: translate(3px, -3px) rotate(1deg); }
  75% { transform: translate(-3px, 3px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0); }
}