容器边框颤动

在前端开发中，我们经常需要为页面中的各种元素添加边框，以增加元素的可视化效果。而边框的动画效果也能够增加页面的活力。本文将介绍如何实现容器边框颤动的效果。

实现思路

实现容器边框颤动的效果，需要借助 CSS3 中的动画特性。具体实现思路如下：

1. 首先，需要为容器添加一个边框样式。

.container {
  border: 1px solid #000;
}

2. 接下来，创建一个用于动画的 keyframes。

@keyframes shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-5px, 0) rotate(-6deg); }
  20% { transform: translate(5px, 0) rotate(6deg); }
  30% { transform: translate(-3px, 0) rotate(-3.6deg); }
  40% { transform: translate(3px, 0) rotate(3.6deg); }
  50% { transform: translate(-2px, 0) rotate(-2.4deg); }
  60% { transform: translate(2px, 0) rotate(2.4deg); }
  70% { transform: translate(-1px, 0) rotate(-1.2deg); }
  80% { transform: translate(1px, 0) rotate(1.2deg); }
  90% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

在上述代码中，我们定义了 11 个关键帧，分别对应动画的不同过程。关键帧中使用了 transform 属性来改变容器的旋转和平移，从而实现边框颤动的效果。

3. 最后，应用定义好的 keyframes 到容器上。

.container {
  border: 1px solid #000;
  animation-name: shake;
  animation-duration: 0.8s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

在上述代码中，我们为容器添加了 shake 动画，并指定了动画的基本设置。其中，animation-iteration-count 设置为 infinite，即动画无限循环。

示例代码

下面是完整的示例代码：

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

.container {
  border: 1px solid #000;
  animation-name: shake;
  animation-duration: 0.8s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-5px, 0) rotate(-6deg); }
  20% { transform: translate(5px, 0) rotate(6deg); }
  30% { transform: translate(-3px, 0) rotate(-3.6deg); }
  40% { transform: translate(3px, 0) rotate(3.6deg); }
  50% { transform: translate(-2px, 0) rotate(-2.4deg); }
  60% { transform: translate(2px, 0) rotate(2.4deg); }
  70% { transform: translate(-1px, 0) rotate(-1.2deg); }
  80% { transform: translate(1px, 0) rotate(1.2deg); }
  90% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

总结

以上就是实现容器边框颤动效果的完整代码和详细介绍。通过学习本文，相信你已经掌握了实现类似效果的基本思路和方法。同时，通过自行修改相关属性和关键帧，你还可以实现更加丰富多彩的效果。