[css] 抖动效果

最新推荐文章于 2023-10-05 14:05:50 发布

okouk

最新推荐文章于 2023-10-05 14:05:50 发布

阅读量288

点赞数

CC 4.0 BY-SA版权

文章标签： css3

本文链接：https://blog.youkuaiyun.com/TKKDOUZI/article/details/125305162

这篇博客介绍了如何使用CSS动画实现一个点击元素后使其水平抖动的效果。通过定义`@keyframes`和:hover伪类，设置了不同时间点元素的位移，从而创建了动态的抖动视觉效果。这是一个关于前端开发中CSS动画技巧的应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    .shake:hover {
            animation: shake 800ms ease-in-out;
        }
        @keyframes shake { /* 水平抖动，核心代码 */
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(+2px, 0, 0); }
            30%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(+4px, 0, 0); }
            50% { transform: translate3d(-4px, 0, 0); }
        }