banner
{小朋友}

xiaopy

抖動、毛玻璃、平滑滾動 style樣式

  • * 常用的 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;
}
載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。