使用css动画animation及@keyframes实现图片持续放大缩小动画展示

最新推荐文章于 2024-07-02 16:31:14 发布

xiaoming_0208

最新推荐文章于 2024-07-02 16:31:14 发布

阅读量1.2k

点赞数 9

文章标签： css 前端

本文链接：https://blog.csdn.net/xiaoming4965/article/details/135546517

版权

本文介绍了一段CSS代码，通过关键帧动画scaleDraw实现图片在3秒内从原始大小逐渐放大1.1倍，再恢复原状，形成无限循环的效果。

摘要由CSDN通过智能技术生成

<div class="img">
    <img src="@/assets/homeImgs/call.png" alt="">
          
 </div>

css样式

.img {
      width: 60px;
      height: 60px;
      padding: 10px;
      box-sizing: border-box;
      background: #fff;
      border-radius: 50px;
      box-shadow: 0px 0px 4px 1px rgba(196, 178, 177, 0.5),
        0px 0px 8px 2px rgba(186, 177, 196, 0.5) inset;


      img {
        width: 100%;
        height: 100%;
        animation-name: scaleDraw;
        /*关键帧名称*/
        animation-timing-function: ease-in-out;
        /*动画的速度曲线*/
        animation-iteration-count: infinite;
        /*动画播放的次数*/
        animation-duration: 3s;
        /*动画所花费的时间*/
      }
    }

@keyframes scaleDraw {

  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(1);
    /*开始为原始大小*/
  }

  25% {
    transform: scale(1.1);
    /*放大1.1倍*/
  }

  50% {
    transform: scale(1);
  }

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