颤动换行文本

在程序开发中，有时需要实现一些特效来增强用户体验。其中，颤动换行文本就是一种比较常见的特效。

实现方式

CSS动画

我们可以利用CSS3中的@keyframes关键字和animation属性来实现颤动效果。具体实现如下：

@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);
    }
}

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

将文本放到一个容器中，为该容器添加.shake类即可。

<div class="shake">颤动的换行文本</div>

JavaScript实现

我们也可以通过JavaScript来实现颤动效果。具体实现如下：

function shake(element) {
    let distance = '4px';
    let duration = 82;
    let steps = 100;
    let delay = 16;
    let direction = true;

    let timer = setInterval(function() {
        if (direction) {
            element.style.transform = 'translateX(' + distance + ')';
        } else {
            element.style.transform = 'translateX(-' + distance + ')';
        }

        direction = !direction;

        steps--;

        if (steps === 0) {
            clearInterval(timer);
            element.style.transform = 'translateX(0)';
        }
    }, delay);
}

let element = document.querySelector('.shake');
shake(element);

注意事项

• 颤动后会导致文本不再处于垂直居中状态，需要对文本进行适当的调整。
• 颤动效果容易引起用户不适，使用时应适度。
• 如果使用CSS动画实现，建议使用前缀来保证各浏览器兼容性。