CSS Animation Guide: Teach you step-by-step to create shaking effects-CSS Tutorial-php.cn

CSS Animation Guide: Teach you step-by-step to create shaking effects

WBOY

Release： 2023-10-20 14:27:12

Original

1448 people have browsed it

CSS Animation Guide: Teach you step-by-step to create shaking effects

CSS Animation Guide: Teach you step-by-step to create shaking special effects

In web design, animation effects are one of the important elements to improve user experience and attract users’ attention. CSS animation is a technology that uses pure CSS to achieve animation effects. Today, we will teach you step by step how to create a stunning shaking effect to make your web page more vivid and interesting.

First, let's create a basic HTML structure. The code is as follows:

<!DOCTYPE html>
<html>
<head>
  <title>CSS动画指南</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="box"></div>
</body>
</html>

Copy after login

Next, we need to add relevant style and animation definitions to the CSS file (assumed to be style.css here). The code is as follows:

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(-10px, -10px);
  }
  50% {
    transform: translate(10px, 10px);
  }
  75% {
    transform: translate(-10px, -10px);
  }
  100% {
    transform: translate(0);
  }
}

Copy after login

In the above code, we added a 0.5 second animation effect to the .box element and set the animation name to shake. Then, we define the keyframes of the shake animation through the @keyframes keyword.

In the keyframe, we set the style changes at five time points. 0% represents the starting state of the animation, and 100% represents the ending state of the animation. 25%, 50% and 75% respectively represent the intermediate state of the animation at different time points. By using the transform attribute and the translate function, we can displace the element horizontally and vertically to achieve a trembling effect.

Finally, we need to save the above code as a style.css file and associate it with the HTML file. Then, we can see our shaking effect in the browser.

The above are the complete steps for creating trembling special effects. You can adjust parameters such as animation duration, displacement, and color according to your needs to make it more suitable for your web design.

To summarize, CSS animation technology provides web designers with a simple and powerful way to achieve animation effects. By mastering relevant technologies and tools, you can easily add various animation effects to your web pages to enhance user experience and attract users' attention. I hope this article is helpful to you, and I wish you go further and further on the road of web design!

The above is the detailed content of CSS Animation Guide: Teach you step-by-step to create shaking effects. For more information, please follow other related articles on the PHP Chinese website!