css动画之按钮放大缩小动态效果——animation

最新推荐文章于 2023-07-26 11:03:59 发布

是我别出声

最新推荐文章于 2023-07-26 11:03:59 发布

阅读量7.5k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：功能 css 文章标签： css animation

本文链接：https://blog.youkuaiyun.com/weixin_44859467/article/details/102467972

功能同时被 2 个专栏收录

4 篇文章

订阅专栏

css

2 篇文章

订阅专栏

本文介绍了一个使用CSS实现的动画效果按钮，通过关键帧动画使按钮在点击时产生缩放效果，增强用户交互体验。

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

效果图

<button class="btn">点我</button>

.btn {
animation: scaleDrew 2.5s ease-in-out infinite;
}
@keyframes scaleDrew {
/* 定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称 */
    0% {
      transform: scale(1);
    }

    25% {
      transform: scale(1.05);
    }

    50% {
      transform: scale(1);
    }

    75% {
      transform: scale(1.05);
    }
  }