CSS3 realizes red envelope jitter effect

Time:2021-12-3

There is a need to achieve the jitter effect of red envelopes. I haven’t done it before. Record hee hee~~
Here we use the transform: rotate () attribute and animation to achieve the animation effect, not to mention the code


.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);
  }
}

The effect to be realized is this style

It has been swinging left and right, but the effect to be achieved is to shake twice every few seconds. What if animation does not support interval animation? Baidu has improved it by setting the percentage, holding still for the first three seconds, shaking from 70%, fast, accurate and ruthless. The results are as follows:


.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);
  }
}

This is the end of this article about CSS3’s implementation of red envelope jitter. For more information about CSS3’s red envelope jitter, please search for previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!