掘金個人ホームページのアイコン回転効果

2021年2月3日#css64

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

掘金の個人ホームページで、プロフィール画像にマウスをホバーすると、画像が加速して回転する効果があることを発見しました。この効果はCSS3を使用して実現されています。具体的なコードは以下の通りです。 ```css img:hover { transform: rotate(666turn); transition-delay: 1s; transition-property: all; transition-duration: 59s; transition-timing-function: cubic-bezier(.34,0,.84,1); } ``` また、2021年2月4日は伝統的な小年の日で、皆さんに楽しい小年を願っています。

掘金コミュニティを閲覧しているときに、面白い小さな隠し要素を見つけました。個人ホームページでアイコンにマウスをホバーすると、どんどん加速して回転します。とても面白いと思い、F12 でこのスタイルがどのように書かれているのかを見てみると、CSS3 の関連技術が使われていることがわかりました。

以下は具体的なコードです。img はアイコン要素で、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：今日は 2021 年 2 月 4 日、旧暦の 12 月 23 日、伝統的な小年です。友人たちに小年の幸せを願っています。気がつけば、もうすぐ新年ですね。