css实现文字、图片变大变小效果

有时候经常在一些网站上看见一些文字或者图片一会变大一会又变回原来的样子，下面就来实现一下
其实很简单，只需要用到css@keyframes规则中的一些属性和animation就可以了，不了解的可以去看一下@keyframes简单介绍

首先我们在html里面写一张图片

<img class="my-shop-btn" src="images/shopping-icon.png" />

css

.my-shop-btn{
  position: absolute;
  z-index: 99;
  top: 100rpx;
  left: 630rpx;
  width: 80rpx;
  height: 80rpx;
  animation: 自己定义的名称（如：my-btn） 3s ease-in infinite;
}

@keyframes 自己定义的名称（如：my-btn） {
  0% { transform: translateX(0rpx); transform: scale(.8); }
  50% { transform: translateX(20rpx); transform: scale(1);  }
  100% { transform: translateX(0rpx); transform: scale(.8);  }
}