Golden personal homepage avatar rotation effect

Feb 3, 2021#css54

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 profile picture on the Juejin community website, achieved using CSS3 technology. The code for the effect is provided and the author wishes readers a happy traditional holiday.

While browsing the Juejin community, I discovered an interesting little Easter egg. When hovering over the avatar on the personal homepage, it continuously accelerates and rotates. I found it quite interesting, so I checked the style using F12 and found that it uses CSS3 techniques.

Below is the specific code, where "img" represents the avatar element, which can be directly written within the "hover" selector.

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 23rd day of the lunar month, which is traditionally known as "Xiaonian" or "Little Year" in China. I wish my friends a happy Xiaonian. Time flies, and the Lunar New Year is approaching.