CSS3 动画实现元素自动变大缩小效果

<div id='box'></div>
<style>
    #box {
        width: 100px;
        height: 30px;
        line-height: 30px;
        background-color: rgb(19, 105, 172);
        text-align: center;
        color: #fff;
        font-size: 14px;
        border-radius: 15px;
        animation: scale 2s infinite alternate;
    }

    @keyframes scale {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.2);
        }
    }
</style>
<p>上述代码中，通过设置<code>animation</code>属性来应用名为<code>scale</code>的关键帧动画。<code>scale</code>动画定义了从原始大小到1.2倍大小的缩放效果，并且设置了<code>2s</code>的动画持续时间，并通过<code>infinite</code>和<code>alternate</code>属性使动画循环播放并在每次播放完后反向播放。</p>
<p>你可以根据需要调整动画的持续时间、缩放倍数和其他样式属性来实现所需的效果。</p>