鼠标放置实现内容缩放

1. 代码部分：

<li v-for="(item, key) in list" :key="key" class="tips-card--item">
    <div class="item-label">
      这是一段内容
    </div>
</li>

.tips-card-item {
  padding: 5px 10px;
  margin-bottom: 20px;
  background-color: #ecf4ff;
  cursor: pointer;
  transition: .3s all;
  &:hover {
    transform: scale(1.03);
  }
}

2. 实现效果：

3. 样式分析：
   1）实现该效果需要通过鼠标触发，可以用:hover实现
   2）运用transform实现放大缩小效果
   3）利用transition增加动画自然过渡效果

&:hover {
  transform: scale(1.03);  // 内容会变成之前的1.03倍
}
此时鼠标移入时，显示的动画不丝滑，可以设定过渡效果

.tips-card-item {
  transition: .3s all; // 过渡时间为0.3s（1->1.03倍）
  &:hover {
    transform: scale(1.03);
  }
}