banner
{小朋友}

xiaopy

HomeArchives

Shake, frosted glass, smooth scrolling style.

67
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
This is a concise summary of the given text in "en" language: The text provides commonly used style styles. It includes a shake animation that uses keyframes to create a shaking effect. There is also a blur effect called backdrop-filter that can be applied to a div element. Additionally, the text mentions a smooth scrolling behavior that can be applied to an HTML element.
  • *Commonly used style styles

Shake Reminder#

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

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

Frosted Glass Effect#

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

Smooth Page Scrolling#

.html{
    scroll-behavior: smooth;
}
Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.