如何运用 CSS 3 做抖动的红包动画效果?

发布时间：2023-07-22 14:48:36 所属栏目：语言来源：

导读： 这篇文章主要给大家分享如何用CSS3来实现红包抖动效果，小编觉得挺有趣，因此给大家分享一下实现代码，感兴趣的朋友可以参考参考，下面我们就一起来看看。

这里用到了transform: rotate()属性，加上ani

  这篇文章主要给大家分享如何用CSS3来实现红包抖动效果，小编觉得挺有趣，因此给大家分享一下实现代码，感兴趣的朋友可以参考参考，下面我们就一起来看看。

       这里用到了transform: rotate()属性，加上animation实现动画效果，不多说上代码

.red_packet {

  width: 180rpx;

  height: 220rpx;

  position: fixed;

  top: 10rpx;

  right: 20rpx;

  color: #D60E19;

  animation: shake .5s linear infinite;

}

@keyframes shake {

  25% {

    transform: rotate(7deg);

  }

  75% {

    transform: rotate(-7deg);

  }

  50%,

  100% {

    transform: rotate(0);

  }

}

       开始实现的效果是这样式的

       一直在左右摆动，但要实现的效果是隔几秒抖两下，animation不支持间隔时间动画怎么办呢？百度了一番，可以通过设置百分比，前三秒不动，从70%的时候开始抖动，而且要快准狠，改良了一番，效果如下：

.red_packet {

  width: 180rpx;

  height: 220rpx;

  position: fixed;

  top: 10rpx;

  right: 20rpx;

  color: #D60E19;

  animation: shake 3s linear infinite;

}

@keyframes shake {

  70%, 80% {

    transform: rotate(7deg);

  }

  75% {

    transform: rotate(-7deg);

  }

  65%,

  85% {

    transform: rotate(0);

  }

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!