抖動、毛玻璃、スムーズスクロールのスタイルstyleType

2023年9月4日67

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

"常用style包括抖动提醒、毛玻璃效果和页面平滑滚动。抖动提醒使用@keyframes shake动画，毛玻璃效果通过backdrop-filter实现，页面平滑滚动则使用scroll-behavior属性。"

* 一般的 style スタイル

シェイクリマインダー#

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

// シェイク
.apply-shake {
  animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
}

フロスト効果#

.div{
    backdrop-filter: blur(5px);
}

ページスムーズスクロール#

.html{
    scroll-behavior: smooth;
}