Gold Personal Homepage Avatar Rotation Effect

Feb 3, 2021#css55

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

The article discusses a rotating effect on a personal homepage avatar on the Juejin community website. The author discovered this interesting feature and examined the CSS code used to achieve it. The code includes the use of CSS3 techniques such as transform and transitions. The author also mentions that it is currently close to the Lunar New Year.

While browsing the Juejin community, I found an interesting little Easter egg. When hovering over the avatar on the personal homepage, it will continuously accelerate rotation. I found it quite interesting, so I checked how this style was written using CSS3.

Below is the specific code, where img is the avatar element, directly written in the hover.

img:hover {
    transform: rotate(666turn);
    transition-delay: 1s;
    transition-property: all;
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34,0,.84,1);
}

PS: Today is February 4, 2021, the twenty-third day of the twelfth lunar month, the traditional Xiaonian (Little New Year). I wish my friends a happy Xiaonian. Unconsciously, the Chinese New Year is approaching.