颤振容器阴影

颤振容器阴影是一个常见的 UI 动效，主要用于表现某个 UI 元素“勾勒出来”的过程。它在现代 Web 应用程序和移动应用程序中广泛使用，可以增强用户体验和提高应用程序的可用性。

工作原理

颤振容器阴影可以使用 CSS3 的 box-shadow 属性和 transform 属性来实现。

具体来说，我们可以将一个 UI 元素放在一个容器中，并为容器添加一个渐变阴影。然后，通过应用 CSS3 的 transform: scale 属性，使容器在不断地收缩和扩张。这样，我们就可以实现颤振容器阴影的效果。

以下是一个简单的示例代码片段，演示了如何使用 CSS3 来实现颤振容器阴影效果：

.container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.box {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.3) 0 3px 6px;
  transform: scale(1);
  animation: shake 1s infinite linear;
}

@keyframes shake {
  from { transform: scale(1); }
  50% { transform: scale(0.95); }
  to { transform: scale(1); }
}

在上面的代码片段中，我们为容器 .container 添加了 overflow: hidden 属性，这样就可以让容器裁剪超出容器边界的内容。然后，我们将一个 UI 元素 .box 放在容器中，并为容器和 UI 元素分别应用了一些基本的样式。最后，我们使用了 CSS3 的 animation 属性和 @keyframes 规则来定义了一个名为 shake 的动画，使 .box 元素在容器中不断缩放、扩展和震动。

应用场景

颤振容器阴影可以用于许多应用场景，例如：

• 提示用户某个 UI 元素正在被选中
• 吸引用户注意某个 UI 元素
• 增强应用程序的流畅性和动感

总之，颤振容器阴影是一种简单而又高效的 UI 动效，可以帮助你打造出更具吸引力的应用程序。