Home > Article > Web Front-end > CSS Animation Tutorial: Teach you step by step how to implement rotation and zoom effects

CSS Animation Tutorial: Teach you step by step how to implement rotation and zoom effects

PHPzOriginal: 2023-10-18 10:22:481686browse

CSS Animation Tutorial: Teach you step-by-step to achieve rotation and scaling effects

CSS animation is one of the important technologies to achieve interactive effects on web pages. This tutorial will teach you step by step how to use CSS to achieve rotation and scaling effects. Before studying this tutorial, please make sure you have a certain understanding of CSS basics.

Preparation

Before you start, you need an editor to write code, such as Sublime Text, Visual Studio Code, etc. When writing code, you can create an HTML file and introduce CSS styles into it.

Create HTML structure

First, we need to create an HTML structure. In this example we will create a simple circle.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="circle"></div>
</body>
</html>

In the above code, we introduced a CSS file named style.css and created a div element with class circle in the body.

Writing CSS styles

Next, we will write CSS styles in the style.css file. First, we need to set the width and height of the .circle element and set its shape to a circle.

.circle {
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  border-radius: 50%;
}

In the above code, we set the width and height of the .circle element to 200px and set its corners to 50%, thus forming a circle.

Add animation effects

Next, we will add animation effects to the .circle element. This animation will include two parts: rotation and scaling.

First, we will add the rotation animation. In the .style.css file, add the following code:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.circle {
  /* 省略之前的代码 */
  animation: rotate 4s infinite;
}

In the above code, we have defined an animation named rotate using the @keyframes keyword. This animation starts from the initial state of 0%, rotating the .circle element 0 degrees, to the end state of 100%, rotating the .circle element 360 degrees. We then apply this animation to the .circle element using the animation attribute and set the duration of the animation to 4 seconds, repeating infinite times.

Next, we will add the zoom animation. In the .style.css file, add the following code:

@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

.circle {
  /* 省略之前的代码 */
  animation: rotate 4s infinite, scale 2s infinite;
}

In the above code, we defined an animation named scale using the @keyframes keyword. This animation starts from an initial state of 0%, keeping the .circle element at its original size, to an intermediate state of 50%, enlarging the .circle element 1.5 times, to an end state of 100%, returning the .circle element to its original size. We then apply this animation to the .circle element using the animation attribute and set the duration of the animation to 2 seconds, repeating infinite times.

Effect display

Now, you can save and run this HTML file, and then view the effect in the browser. You will see a rotating and zooming circle. You can modify CSS styles and animation properties according to your needs to achieve different rotation and scaling effects.

Summary

CSS animation can help us achieve various interactive effects in web pages. In this tutorial, we teach you step by step how to use CSS to achieve rotation and scaling effects. By studying this tutorial, I hope you can master basic CSS animation technology and apply it in actual projects. If you want to learn more about CSS animation techniques and methods, please continue to study in depth. Good luck writing amazing CSS animations!

The above is the detailed content of CSS Animation Tutorial: Teach you step by step how to implement rotation and zoom effects. For more information, please follow other related articles on the PHP Chinese website!

css html class animation visual studio visual studio code sublime text

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use CSS to create a horizontal scrolling news column effectNext article：How to use CSS to create a horizontal scrolling news column effect

See more

CSS Animation Tutorial: Teach you step by step how to implement rotation and zoom effects

Related articles