抖动、毛玻璃、平滑滚动 style样式

* 常用的 style 样式

抖动提醒

Copy
@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;
}

毛玻璃效果

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

页面平滑滚动

Copy
.html{
scroll-behavior: smooth;
}