Web前端

CSS3 @keyframes 实现手机桌面 App 图标编辑状态抖动效果

在 Web 端模拟 iOS / Android 手机桌面长按进入编辑状态时图标轻微左右晃动的动画质感，仅需纯 CSS3 的 @keyframes 与 transform: rotate() 即可丝滑实现。

一、 核心 CSS 动效代码

@keyframes shake-icon {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(2deg); }
    50%  { transform: rotate(0deg); }
    75%  { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

.app-icon.editing {
    /* 0.2秒无限循环交替抖动 */
    animation: shake-icon 0.2s infinite ease-in-out;
    transform-origin: center center;
}
#Web前端