js实现文字预警放大缩小动画

在JavaScript中，你可以使用CSS3的`transition`和`transform`属性结合来实现文字放大缩小的动画效果。首先，你需要设置一个初始样式，比如字体大小和位置，然后编写一个函数，在该函数中改变元素的字体大小，并添加`transition`属性，让变化过程平滑过渡。

以下是基本步骤：

1. 创建HTML元素并设置基础样式：

<div id="warning-text">警告</div>
<style>
#warning-text {
  font-size: 16px;
  transition: transform 0.5s ease; /* 设置过渡时间 */
}
</style>

2. 使用JavaScript触发动画：

const textElement = document.getElementById('warning-text');

// 放大动画
function expandText() {
  textElement.style.transform = 'scale(1.2)';
}

// 缩小动画
function shrinkText() {
  textElement.style.transform = 'scale(0.8)';
}

// 调用动画，例如点击按钮触发
document.querySelector('.expand-button').addEventListener('click', expandText);
document.querySelector('.shrink-button').addEventListener('click', shrinkText);

在这个例子中，当你点击“放大”或“缩小”按钮时，文字会相应地按照指定的比例放大或缩小，并平滑过渡0.5秒。