CSS实现无限循环动画（缩放）

最新推荐文章于 2024-08-24 16:38:53 发布

Right atrium

最新推荐文章于 2024-08-24 16:38:53 发布

阅读量2.5k

点赞数 4

分类专栏： Css 文章标签： css3 css 前端 animation

本文链接：https://blog.csdn.net/Kino_Hs/article/details/112909647

版权

CSS animation 无限循环视图缩放关键帧

关键词由CSDN通过智能技术生成

Css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

主要是用CSS的animation来实现了一个无限缩放的效果。
一、HTML

<view class="anima"></view>

二、CSS

.anima{
   width: 151rpx;
   height: 153rpx;
   background: url(https://4bd2d4613.png) no-repeat 0 0;
   background-size: 100% 100%;
   animation: firstdiv 2s linear 2s infinite alternate;
}
@keyframes firstdiv{
   0%{
      transform: scale(1);
   }
   25%{
      transform: scale(0.9);
   }
   50%{
      transform: scale(0.8);
   }
   75%{
      transform: scale(0.9);
   }
   100%{
      transform: scale(1);
   }
}