CSS3は赤い封筒を振る効果を実現します

赤い封筒の揺れ効果を実現するには要件があります。これまでやったことがないので、記録しておきます。ヘヘ〜〜
ここでは transform: rotate() プロパティが使用され、アニメーション効果を実現するためにアニメーションが追加されています。コードについては説明しません。

.red_pa​​cket {
  幅: 180rpx;
  高さ: 220rpx;
  位置: 固定;
  上: 10rpx;
  右: 20rpx;
  色: #D60E19;
  アニメーション: 0.5 秒の線形無限振動。
}
@keyframes シェイク {

  25% {
    変換: 回転(7度);
  }
  75% {
    変換: 回転(-7度);
  }

  50%、
  100% {
    変換: 回転(0);
  }
}

当初達成された効果は次の通りでした

左右に揺れ続けますが、数秒ごとに 2 回揺れる効果が欲しいです。アニメーションがインターバル アニメーションをサポートしていない場合はどうすればいいですか? Baiduで検索したところ、パーセンテージを設定すると、最初の3秒間は動かず、70％から揺れが始まり、速く、正確で、容赦なく揺れることがわかりました。いくつかの改良を加えた後、効果は次のようになります。

.red_pa​​cket {
  幅: 180rpx;
  高さ: 220rpx;
  位置: 固定;
  上: 10rpx;
  右: 20rpx;
  色: #D60E19;
  アニメーション: 3 秒間の線形無限のシェイク。
}

@keyframes シェイク {

  70%、80% {
    変換: 回転(7度);
  }
  75% {
    変換: 回転(-7度);
  }

  65%、
  85% {
    変換: 回転(0);
  }
}

CSS3 で赤い封筒を揺らす効果を実現する方法についての記事はこれで終わりです。CSS3 の赤い封筒を揺らす関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。