如何让图标在颤动时从容器中出来

要让图标在颤动时从容器中出来，可以通过以下步骤实现：

1. 使用CSS动画：使用CSS的@keyframes规则创建一个动画，定义图标颤动的效果。可以通过旋转、缩放、透明度等属性来实现颤动效果。
2. 将图标放置在一个容器中：在HTML中创建一个容器元素，可以是一个div或者其他适合的元素，将图标放置在容器中。
3. 应用动画效果：使用CSS的animation属性将定义好的动画效果应用到容器元素上。设置动画的持续时间、重复次数、延迟等属性，以控制动画的效果。
4. 触发动画：通过JavaScript或者CSS伪类等方式触发动画效果。可以通过添加类名、设置样式等方式来触发动画，使图标开始颤动。

以下是一个示例代码：

HTML:

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

CSS:

.container {
  width: 100px;
  height: 100px;
  position: relative;
}

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 设置动画属性 */
  animation: shake 1s infinite;
}

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

通过以上代码，图标将在容器中颤动，持续1秒钟，无限循环。可以根据需要调整动画的效果和持续时间。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云CSS：https://cloud.tencent.com/product/css
• 腾讯云CDN：https://cloud.tencent.com/product/cdn
• 腾讯云云服务器：https://cloud.tencent.com/product/cvm
• 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云对象存储COS：https://cloud.tencent.com/product/cos
• 腾讯云人工智能：https://cloud.tencent.com/product/ai
• 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
• 腾讯云移动推送：https://cloud.tencent.com/product/tpns
• 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
• 腾讯云游戏多媒体引擎：https://cloud.tencent.com/product/gme
• 腾讯云音视频处理：https://cloud.tencent.com/product/mps