在容器中颤动中心文本

在UI设计中，较常见的一种效果是将某一文本置于固定大小的容器中，并使其在容器内进行颤动（或者称之为“浮动”）。这种效果的应用广泛，如清单中的消息提示、标签等等。本篇介绍一种在容器中颤动文本的简单实现方式。

实现细节

我们可以使用CSS动画实现文本在容器内颤动的动画效果。具体来说，我们需要创建一个固定大小的容器，并将文本以某种方式放置于容器中。然后，我们定义一个CSS动画，使文本在容器内颤动。

下面是一段实现该效果的HTML和CSS代码。

<div class="container">
    <span class="text">Hello World!</span>
</div>

.container {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    position: relative;
    overflow: hidden;
}

.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    animation: shake 2s infinite;
}

@keyframes shake {
    0% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(-5px, 0);
    }
    20% {
        transform: translate(5px, 0);
    }
    30% {
        transform: translate(-5px, 0);
    }
    40% {
        transform: translate(5px, 0);
    }
    50% {
        transform: translate(-5px, 0);
    }
    60% {
        transform: translate(5px, 0);
    }
    70% {
        transform: translate(-5px, 0);
    }
    80% {
        transform: translate(5px, 0);
    }
    90% {
        transform: translate(-5px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

上述代码中，我们首先创建了一个固定大小的容器，并定义了容器的样式。然后，我们将文本置于容器中，并将其样式设置为position: absolute，以便让其能够在容器内进行移动。接着，我们定义了一个名为shake的CSS动画，并将其应用于文本上，以实现文本在容器内颤动的动画效果。

shake动画的具体实现是，通过translate方法在x轴方向上对文本进行位移，从而实现文本在容器内颤动的效果。每个%表示了动画执行过程中的时间点，因此这里的90%和100%表示了动画的结束状态。通过调整每个时间点上的位移值，可以使文本的颤动效果更加多样化。

总结

本篇介绍了一种实现文本在容器内颤动的简单方式，这种效果广泛应用于UI设计中。这里我们使用了CSS动画来实现该效果。通过调整位移值和动画的时间点，可以实现不同种类的颤动效果。