How to create a circle rotation effect with jquery

In web design, animation effects are a very important part, which can increase the fun and interactivity of the page. Circle rotation is one of the classic animation effects. The following will introduce how to use JQuery to create a circle rotation animation effect.

1. HTML Layout

First, you need to define a container element in the HTML file to wrap the animation element. Add a div element inside the container element as an animated element.

<div class="container">
  <div class="circle"></div>
</div>

2. Building CSS styles

Next, you need to add CSS styles for container elements and animation elements. For the container element, set its width and height to 100% so that it fills the entire page. For animated elements, set their width and height equal to give them a circular effect. At the same time, set its initial position and color.

.container{
  width: 100%;
  height: 100%;
}

.circle{
  width: 200px;
  height: 200px;
  background-color: #F44336;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
}

3. JQuery to achieve animation effects

After the above HTML and CSS settings are completed, you need to use JQuery to achieve animation effects. JQuery provides an animate() method, which can realize the animation effect of elements. The specific implementation is as follows:

$(document).ready(function(){
  animateCircle();
});

function animateCircle(){
  $('.circle').animate({deg: 360}, {
    duration: 2000,
    step: function(now){
      $(this).css({
        transform: 'rotate(' + now + 'deg)'
      });
    },
    complete: animateCircle
  });
}

As shown above, define an animateCircle() function to loop the circle rotation animation. Use the animate() method to set animation effects. Among them, the first parameter deg is used to represent the angle of rotation of the circle, and the initial value is 0. duration represents the animation duration, which is 2000 milliseconds in this example. step refers to the callback function during the animation. It will be called after each frame of animation ends, calculate the new angle based on the current deg value, and rotate the element to the new angle through the css() method. Finally, complete represents the callback function after the animation is completed, which is used to continue executing the circle rotation animation in a loop.

4. Effect display

Finally, open the HTML file in the browser, and you can see the animation effect of a circle rotating.

The above are the steps for using JQuery to create a circle rotation animation effect. Through the combined use of HTML, CSS and JQuery, more complex animation effects can be achieved, adding more fun to web pages.

The above is the detailed content of How to create a circle rotation effect with jquery. For more information, please follow other related articles on the PHP Chinese website!