Flex 方向颤动

Flex 方向颤动是一种在使用 Flexbox 布局时可以实现的动画效果。通过改变容器的 flex-direction 属性，让其在水平和垂直方向上来回摆动，可以为页面增加一些生动的元素。

实现方法

1. 首先，在 HTML 文件中创建一个容器，并将其设置为 Flexbox 布局，如下所示：

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

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 接下来，在 CSS 文件中设置容器的 flex-direction 属性为 row-reverse，表示将主轴方向从水平反转为垂直，同时沿着交叉轴对齐元素。

.container:hover {
  flex-direction: row-reverse;
  align-items: flex-end;
}

3. 为了使容器来回摆动，我们可以使用 CSS 的 @keyframes 规则来创建一个动画效果。

.container:hover {
  animation: shake 0.5s ease-in-out;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes shake {
  to {
    transform: translateX(10px);
  }
  from {
    transform: translateX(-10px);
  }
}

4. 根据实际情况，可以调整容器和元素的样式，使其更加符合设计要求。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #ccc;
  width: 300px;
  height: 200px;
}

.item {
  background-color: #333;
  color: #fff;
  font-size: 24px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

效果预览

最终效果如下所示：