In March, the East Asian monsoon brings moist air from the Pacific. Take advantage of a drizzly weekend to present the fourth installment of a weekly animated series. Without further ado, let’s begin our text. This article analyzes some of the effects of implementation, just as an idea to share, just as learning material to use.

As a heavy gold digger, I happened to find this animation, which is very simple to implement. I am curious to know whether you found this animation.

Source animation

On the Nuggets home page, mouse over the avatar, avatar has a rotation animation, and rotation has a significant acceleration process.

Implementation analysis

After analysis, the realization of the effect has three points

  • How to realize the circular head
  • Rotation effect realization, how to determine the rotation Angle
  • The rate of rotation varies significantly and the time function needs to be determined

Code implementation

This can be done with rounded corners

.avatar {
    border-radius: 50%
}
Copy the code

The rotation animation can be realized by using CSS animation directly. Note that the rotation Angle is directly selected. IE9.0+,Firefox13.0+ and other browsers support this property.

As for the change of speed during rotation, it can be directly controlled by the time function mentioned several times in our previous articles.

.avatar:hover {
    transform: rotate(666turn);
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34, 0, .84, 1)
}
Copy the code

Results show

Key points interpretation

The animation of this paper is not complicated to implement, and I personally feel that two points are worth recording. One is a round head, which can be achieved by setting rounded corners; The other is that when you set the rotation, you can directly set the number of turns by turning. As for the time function, I don’t think we need to mention it again.

Code has been uploaded to Github, welcome to issue.

Last rule, post my blog, welcome to follow