以图标作为按钮颤动

在应用程序中，图标通常是在用户界面中最重要的元素之一。通过添加颤动效果，可以吸引用户的注意力，使用户更容易注意到重要的按钮。

实现

为了实现图标的颤动效果，我们可以使用CSS3动画。在动画中我们可以使用关键帧（keyframes）定义动画的开始和结束状态。接下来，我们可以使用本文中只提供示例的JavaScript代码来触发动画。

.icon {
    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0) rotate(1deg);
    }
    
    20%, 80% {
        transform: translate3d(2px, 0, 0) rotate(-1deg);
    }
    
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0) rotate(1deg);
    }
    
    40%, 60% {
        transform: translate3d(4px, 0, 0) rotate(-1deg);
    }
}

这段CSS代码定义了一个使用关键帧shake的动画，它将一个图标左右晃动。

function shakeIcon() {
    var icon = document.querySelector('.icon');
    icon.classList.add('shake');
    setTimeout(function() {
        icon.classList.remove('shake');
    }, 820);
}

此JavaScript代码将颤动效果添加到指定的元素上，然后在一段时间后将其删除。

结论

通过使用CSS3动画和简单的JavaScript代码，我们可以将颤动效果添加到应用程序中的图标中。这将有助于提高应用程序的可用性和用户体验。