1. ホーム
  2. Web制作
  3. CSS

[css3]赤いパケットのジッター効果を実現するCSS3

2022-01-13 01:24:50

赤い封筒のジッター効果を達成する必要がある、前に行われていない、レコードへぇ~~~。
/{br ここでは、transform: rotate() プロパティを使用し、さらにアニメーションの効果を得るために、コードについて多くを語ることはありません。

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

効果の始まりは次のようになります。

画像

数秒に一度、2回揺れる効果がありますが、アニメーションはインターバルアニメーションに対応していません。Baiduのいくつかは、あなたが割合を設定することができ、最初の3秒は、揺れを開始する時間の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);
  }
}

CSS3のこの記事は、赤いパケットを振る効果を達成するためにここで紹介されて、より関連するCSS3赤いパケットを振るコンテンツは、スクリプトの家の前の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたがよりスクリプトホームをサポートしています願っています!.