如何使容器中间的文本颤动

在前端开发中，文本颤动效果常常被用来吸引用户注意力。本文将介绍如何使用 CSS3 实现容器中间文本颤动的效果。

实现思路

我们需要使用 CSS3 的 @keyframes 规则来定义动画效果，然后将动画应用到容器中心的文本上。

具体实现步骤如下：

1. 设置容器为相对定位布局；
2. 在容器中添加一个绝对定位的子元素，并将其与容器中心重合；
3. 定义一个颤动的动画效果，比如从左侧旋转不少于 10 度，然后再向右侧旋转不少于 10 度，反复执行若干次；
4. 将动画应用到容器中心的文本上。

代码实现

以下是一个典型的实现示例：

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 150px;
  background-color: #f9f9f9;
}

.container span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: #333;
  animation: shake 0.5s ease-in-out infinite;
}

@keyframes shake {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

首先，我们定义一个容器类 .container，并将其设置为相对定位布局，以及居中显示元素。

然后，我们在容器中添加了一个 span 元素，并将其设置为绝对定位布局，与容器中心重合。在样式中，我们将其设置为 32 像素的字体大小和黑色字体颜色。更重要的是，我们将 animation 属性应用到该元素上，并将其设置为刚刚定义的 shake 动画效果。

最后，我们使用 @keyframes 规则来定义动画效果。在该规则中，我们分三帧分别将文本向左旋转 10 度，然后向右旋转 10 度，最后再回到初始状态。

结论

本文介绍了如何使用 CSS3 实现容器中间文本颤动的效果。通过定义动画效果并将其应用到容器中心的文本上，我们可以轻松创建一个引人注目的动态效果。