颤振打印 - CSS

在前端开发中，我们通常需要实现一些视觉效果来增强用户体验。颤振打印是一种比较有趣的效果，可以让页面上的文字产生一种颤动的效果，给用户带来新鲜感。

实现方法

要实现颤振打印效果，我们可以利用CSS中的 @keyframes 和 animation 属性。具体实现方法如下：

HTML

首先，在HTML中我们需要一个 <span> 标签来包裹需要实现颤振打印效果的文本。

<span class="shake-print">Hello World!</span>

CSS

然后，在CSS中我们可以通过以下代码实现颤振打印效果：

.shake-print {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
    display: inline-block;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

这段代码中，我们首先为包裹文本的 <span> 标签设置了 display: inline-block; 属性，使其能够动态地产生颤振效果。然后我们利用 @keyframes 关键字定义了一个名为 shake 的动画，该动画会在颤振时产生位移效果。具体来说，我们通过四个百分比参数分别定义4种位移状态，实现颤振效果。

效果展示

下面是实现后的颤振打印效果展示：

Hello World!

总结

通过这个小案例，我们了解了CSS中如何利用 @keyframes 和 animation 属性实现颤振打印效果。不仅展示了CSS动画的强大，而且为我们在实际开发中添加一些小的动态效果提供了参考。